vue-sso-yi v1.0.22

插件说明

为了实现单点登录、权限控制等功能，前端有很多繁杂的工作，包括：

• 与用户管理系统、单点登录系统通过接口交换数据
• 校验接口返回值，判断用户是否登录，并根据情况跳转页面实现用户登录/自动登录
• 获取权限列表，判断用户是否有权限访问某个页面或操作某个按钮

插件实现了上述逻辑，对其他系统暴露统一接口。其他系统无需关注单点登录和权限校验的具体实现细节，只需按照文档示例调用相关函数，即可集成单点登录和权限校验功能。

前置条件

使用该插件前，请确保系统前端满足以下条件：

1. 使用vue框架
2. 使用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对象