huawen-pc-auth 前端登录组件库

仓库

当前组件库发布在 私有仓库中，仓库地址: http://10.43.219.188:4873/

// 设置仓库地址
npm config set registry http://10.43.219.188:4873

安装

npm install --save  hundun-pc-auth

引用与配置

 // 导入组件库
import hundunPcAuth  from 'hundun-pc-auth'
// 导入样式
import 'hundun-pc-auth/lib/hundun-pc-auth.css'
// 注册组件库
Vue.use(hundunPcAuth) 等同于: Vue.use(hundunPcAuth , {type: 'element'})
// 如果当前使用组件库是view-design 则修改为
Vue.use(hundunPcAuth , {type: 'iview'})
// 配置axios
// 其中axios为当前前端项目配置好的axios封装，后续将使用当前项目的axios进行组件内部的http请求
window.http = axios 

页面引用示例

<div id="app"> 
    <hundun-pc-user color="#303133"  token-name="x-tone-token" @login="loginCallback(uid)" @privacyPolicy="privacyPolicy()">
    </hundun-pc-user>
    
</div>

扩展自定义插槽实现登录后的下拉列表

<template>
  <div  >
    <hundun-pc-user color="#303133"  token-name="x-tone-token"  >
    <template slot="menus">
        <el-dropdown-item >
            <router-link>插槽按钮</router-link>
        </el-dropdown-item>
    </template>
    </hundun-pc-user>
    
  </div> 
</template>

通过组件回调来获取用户主动登录和登出的事件

<template>
  <div  >
    <hundun-pc-user ref="hundunPcUser" @login="loginCallback" @logout="logoutCallback">

    </hundun-pc-user>
    
  </div> 
</template>
<script>
export default {
  data() {
    return {
      userInfo: {}
    }
  },
  methods: {
    // 用户登录事件 带回用户信息
    loginCallback(userData){
      this.userInfo = userData
    },
    // 用户登出事件
    logoutCallback() {
      this.userInfo = {}
    }
  }
}


</script>

未登录时：

点击图标登录（样式待完善）：

登录后用户图标：

hundun-pc-user

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------|-------- |---------- |------------- |-------- | | token-name | 全局token名称 | String | - | x-tone-token | | info | 是否显示个人信息 | Boolean | - | false | | color | 用户名称字体颜色 | String | - | #000000 |
| items | 自定义下拉列表,详见下表 | Array | - | - | | dialog-color | 登录框表单颜色 | String | - | #d19a2f |
| wei-chart | 是否需要支持微信扫码登录 | Boolean | - | false | | sync-login | 是否需要单点同登 | Boolean | - | true | | sync-logout | 是否需要单点同退 | Boolean | - | true |

items Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |--------|-------- |---------- |------------- |-------- | | id | 下拉列表id，可为空 | String | - | - | | name | 显示名称，不能为空 | String | - | - | | routeName | 跳转路由名称，为空则继续判断routePath | String | - | - |
| routePath | 跳转路由path | String | - | - | | routePath | 跳转路由path | String | - | - |

其中 routeName和routePath均为空时 点击不跳转，会触发回调函数 @itemClick,参数为当前点击的条目

method

| 方法 | 说明 | 参数 | 返回值 |
|--------|-------- |---------- |------------- | | getUser | 获取当前登录用户信息,未登录返回null | - | { userId: '', username: '', logoUrl: '' , userNo: '' } | | getToken | 返回当前登录token | - | String |

event

| 方法 | 说明 | 参数 |
|--------|-------- |---------- | | login | 登录成功后的回调，携带用户id | 用户信息{userId:'' , username:'',logiUrl: ''...} | logout | 主动登出后的回调 | - |
| itemClick | 自定义items下拉菜单列表后，点击下拉菜单的回调事件 | items中配置的当前点击数据 | | privacyPolicy| 隐私协议点击后触发的回调 | - |

slot

| 方法 | 说明 |
|--------|-------- | | menus | 下拉列表插槽 |