插件说明
为了实现单点登录、权限控制等功能，前端有很多繁杂的工作，包括：
- 与用户管理系统、单点登录系统通过接口交换数据
- 校验接口返回值，判断用户是否登录，并根据情况跳转页面实现用户登录/自动登录
- 获取权限列表，判断用户是否有权限访问某个页面或操作某个按钮
插件实现了上述逻辑，对其他系统暴露统一接口。其他系统无需关注单点登录和权限校验的具体实现细节，只需按照文档示例调用相关函数，即可集成单点登录和权限校验功能。
前置条件
使用该插件前，请确保系统前端满足以下条件：
- 使用vue框架
- 使用axios与后端交互
使用方法
安装
npm i -S vue-sso-yi
示例
import Vue from 'vue'
import App from './App'
import router from './router'
import vuesso from 'vue-sso-yi'
import config from '@/config'
Vue.use(vuesso, {
systemName: config.systemName, // 存储于用户管理系统中的系统名称
ssoFrontURL: config.ssoFrontURL, // sso前端地址，用于跳转
ssoBackURL: config.ssoBackURL // sso后端地址，用于接口调用
checkTokenConfig: config.checkTokenConfig // checkToken校验后缀，用于用户调用接口666之后返回的位置
})
var store = Vue.registerStore(null)
var vm = new Vue({
el: '#app',
router,
store,
components: {App},
template: '<App/>'
})
Vue.loadUserAuth(vm)
权限控制
<el-button :disabled="!hasAuth('noauthname')">无权限置灰的按钮</el-button>
<el-button :disabled="hasAuth('frontpage')">有权限正常显示的按钮</el-button>
<el-button v-if="hasAuth('noauthname')">无权限隐藏的按钮</el-button>
函数接口
实例方法
vm.hasAuth(authName)
判断当前登录用户是否拥有指定权限
Vue.logout()
退出登录，并重定向到登录页
全局方法
Vue.getUserInfo()
获取用户信息，返回Promise对象