permission 插件

介绍

vivien-permission 插件是一个基于后台管理系统中的路由菜单权限控制系统，通过 vue-router 全局控制后台管理系统的菜单权限。

功能

功能	介绍
菜单路由权限控制	通过接口返回权限路由名称，控制当前登录用户的路由权限
按钮级别权限控制	通过接口返回按钮权限列表名称，控制当前登录用户的按钮权限
单点登录	使用当前插件的系统和其他系统相互登录

安装

1. 安装相关依赖

该控制系统使用 vue-router 全局控制路由菜单权限，使用 js-cookie 作为 token 存储，依赖 pinia 存储用户菜单权限。

js-cookie

# npm
npm install js-cookie

# yarn
yarn install js-cookie

# pnpm
pnpm install js-cookie

pinia

# npm
npm install pinia

# npm
npm install pinia

# pnpm
pnpm install pinia

vue-router

# npm
npm install vue-router@4

# yarn
yarn install vue-router@4

# pnpm
pnpm install vue-router@4

2. 安装插件

# npm
npm install vivien-permission

# yarn
yarn install vivien-permission

# pnpm
pnpm install vivien-permission

使用插件

引入vivien-perimission

在你的项目中直接引入 sewen-ui 的 vivien-perimission 插件

// 引入插件初始化方法
import initPermission from "sewen-ui/permission"

// 初始化插件
await initPermission(app, options, callback)

注意：该插件依赖 vue-router 和 pina，因此在初始化插件之前需要你预先初始化 vue-router 和 pinia，你也可以将 vue-router 是实例 router 对象传入插件中的 options.router 参数中，在插件中进行初始化路由和 pinia;
如果你没有预先创建 pinia 的实例，插件内部会预先创建。

下面是一个例子，展示了最简单的用法

import { createApp } from 'vue'
import App from './views/App.vue'
import { createPinia } from 'pinia'
import bootstrap from "sewen-ui/permission"
import { whiteList, asyncRoutes, basicRoutes } from "这是你的接口路由配置"
import { getAuthList, checkSSOLogin } from "这是你的接口"
import router from '这是你的router实例';  
import ElMessage from '这是你的消息提示';  

const app = createApp(App);
const pinia = createPinia()
// permission 内部将自动引入 router 和 pinia。因此你必须安装这两个插件
// 可以手动使用  router 和 pinia 插件，也可以不手动使用，去掉该语句即可
app.use(router).use(pinia)

const domain = '.example.com' // 你的系统域名
const publicPath = import.meta.env.VITE_PUBLIC_PATH // 系统 publicPath 目录
export async function setupXWPermission(app: App, router: any) {
    //定义一个符合 permissionOptions 接口的对象 
    const options = {
        router,
        publicPath: '/', // 系统 publicPath 目录
        whiteList, // 路由白名单
        asyncRoutes, // 异步路由
        basicRoutes, // 基础路由
        getAuthList, // 获取用户权限列表
        checkSSOLogin, // 检查oa登录状态
        storageType: 'cookiet',// 本地数据存储类型
        TOKEN_KEY: 'token-key', // token 存储 key 值
        SSO_TOKEN_KEYS: ['SIAMTGT', 'SIAMJWT'],

    }
    await initPermission(app, options, (params: any) => {
        console.log('权限初始化完成===', params)
    })
}
setupXWPermission(app)
app.mount('#app')

配置

`bootstrap(app, options, callback)`

参数	介绍
app	vue3 实例，通过 `createApp(App)` 创建的实例
options	对象类型，初始化参数值
callback	初始化回调方法，回调参数中返回路由相关方法

options 参数

类型：

interface permissionOptionsType {
    routerMode?: 'hash' | 'history', // 路由模式
    publicPath?: string, // 路由根路径
    router?: Router,  // 路由对象(可选)
    whiteList?: string[], // 白名单
    asyncRoutes?: AppRouteModule[], // 异步路由
    basicRoutes?: AppRouteModule[], // 基础路由
    domain?: string | null, // oa 域名
    Message?: Function, // 消息提示
    getAuthList?: Function | null, // 获取用户权限列表接口
    checkSSOLogin?: Function | null, // 检查oa登录状态接口
    logout?: Function | null, //退出登录接口
    storageType?: 'localStorage' | 'sessionStorage' | 'cookie',  // 本地数据存储类型
    expires?: string,// 本地数据存储过期时间
    TOKEN_KEY?: string, // token key
    SSO_TOKEN_KEYS?: string | Array<any>// 单点登录 Keys
    Message?: Function | undefined, // 消息提示组件
    homeRoute: String | undefined // 首页路由(路径)
}

type AppRouteRecordRaw = RouteRecordRaw & {
  path: string; //路由路径
  name?: string; //路由名称
  order?: number | null | undefined; //路由排序
  component?: Component | string; //视图组件
  hidden?: boolean; //是否在菜单显示
  redirect?: string; //重定向路径
  children?: AppRouteRecordRaw[]; //子菜单
  meta?: RouteMeta //路由元信息
};

参数	介绍	类型
router	vue-router 实例对象	`Router`
whiteList	路由白名单	`Array<RouteName>` 数组数组内每一项为路由名称
asyncRoutes	异步加载的路由列表	`AppRouteModule[]` 数组数组内每一项为路由对象
basicRoutes	基础路由，非异步加载的路由	`AppRouteModule[]` 数组数组内每一项为路由对象
getAuthList	获取权限列表异步方法(接口)	`Function`
checkSSOLogin	方法，使用 oa token 换取当前系统的 token 接口, 登录系统	`Function`
domain	oa 域名	`String`
Message	消息提示组件	`Function`
homeRoute	默认首页路由（路径）	`String`

getAuthList 接口

传入用户的 token，返回用户的菜单权限列表和按钮权限列表。

getAuthList({
    token: '' // 当前用户 token
})

参数:
- 类型：对象
- 参数值：
  - token: 当前登录系统的用户 token
返回值：
- 类型：对象
- 返回值：
  - ```
  {
      menuNames: [], // 菜单权限名称列表
  	rule: [],// 按钮级别权限
  }
```
  - menuNames: 菜单权限列表，数组中每一项为路由名称。
  - rule：按钮级别权限列表，数组中每一项为按钮权限标识字符串。

checkSSOLogin 接口

传入其他系统的 token，返回当前系统的 token，用于其他系统和使用当前插件系统的单点登录。

checkSSOLogin({
     ticketName: key,
     ticketValue: oaToken
})

参数:
- 类型：对象。
- 参数值：
  - ticketName: 其他系统的存储用户 token 的 key 值；
  - ticketValue: 其他系统的存储用户的 token ；
返回值：
- 类型：对象。
- 返回值：
  - ```
  {
      token: '' //当前系统的 token 值
  }
```
  - token: 当前系统的 token 值。

callback 回调函数

初始化方法 bootstrap(app, options, callback) 第三个参数 callback 为回调函数，该回调函数的参数接收用于获取和控制权限相关的方法。

 bootstrap(app, options, ({
    getAsyncRoutes,
    getRoutes,
    getAddRoutes,
    getShowRouters,
    SetRoutes,
    SetRoute,
    ClearRoute,
    SetShowRouters,
    GenerateRoutes,
    getToken,
    getAuthority,
    SetToken,
    SetAuthority,
    GetAuthority,
    checkSSOLogin,
    Logout,
    ClearLocal,
    Globalstate: globalState,
    Getroutenames: getRouteNames,
    SetKeys: setKeys,
    SetStorage: setStorage
 })=> {
})

回调参数说明：

方法	说明	参数	返回值
getRoutes	获取所有路由表		所有路由表
getAddRoutes	获取所有异步路由表		所有异步路由表
getShowRouters	获取二级菜单展示路由的路由表		二级菜单展示路由的路由表
SetRoutes	设置所有路由	`(asyncFilterRoutes: Array<T>, constantAsyncRoutes: Array<T>)` asyncFilterRoutes 异步(权限)路由表 constantAsyncRoutes 常规路由表
SetRoute	设置所有路由	`(routes: Array<RouteItem>)` routes 所有路由表
ClearRoute	清空路由数据
SetShowRouters	设置二级菜单路由	`(routes: RouteItem)` routes:二级菜单显示的路由	二级菜单显示的路由
GenerateRoutes	生成异步路由表	`(routesMenuNames: Array<RouteItem>, asyncRoutes: AppRouteModule[], basicRoutes: AppRouteModule[])` routesMenuNames: 异步路由列表路由名称数组 asyncRoutes：异步路由表 basicRoutes：常规路由表	异步路由表
getToken	获取用户 token		用户 token
getAuthority	获取用户权限列表		用户权限列表
SetToken	设置用户 token	`{token: '用户token', oa: {ticketName:'其他系统token key', ticketValue:'其他系统 token 值' }}`
SetAuthority	设置用户权限列表	`{authority: []}`
GetAuthority	获取用户权限列表	`(getAuthList: Function, domain: string)` getAuthList: 获取用户权限列表接口 domain：系统域名	用户权限列表
checkSSOLogin	使用其他系统 token 登录系统	`(checkSSOLogin: Function, domain: string)` checkSSOLogin: 用其他系统 token 换取当前系统的接口 domain: 当前系统域名
Logout	退出当前系统	`(domain: string, logout?: Function)` domain: 当前系统域名 logout：退出系统接口
ClearLocal	清空存储数据	`{domain: 当前系统域名}`

组件权限判断

组件权限判断配合 v-permission 指令使用。

Vue2 指令参考文档：权限判断 | sewen-ui (sewar-x.github.io) Vue3 指令参考文档：权限判断 | sewen-ui (sewar-x.github.io)

接口

服务端返回的用户权限接口格式示例：

{
 routes: ['用户管理页面路由名称','b页面路由名称','c页面路由名称']
 rules:[
   '用户管理页面新增按钮标识',
   '用户管理页面删除按钮标识',
   '用户管理页面编辑按钮标识'
 ]
}

贡献者

Vivien

Staff Frontend Engineer

permission 插件 #

介绍 #

功能 #

安装 #

1. 安装相关依赖 #

2. 安装插件 #

使用插件 #

引入vivien-perimission #

配置 #

bootstrap(app, options, callback) #

options 参数 #

getAuthList 接口 #

checkSSOLogin 接口 #

callback 回调函数 #

组件权限判断 #

接口 #

贡献者 #