hundun-pc-auth

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	下拉列表插槽