在传统单体项目中，通常会有一些框架用来管理熟知的权限。如耳濡目染的 Shiro 或者 Spring Security 。然而，到了现在这个时代，新开始的项目会更多的才用后端微服务 + 前端 mvvm 的架构开始书写项目。权限控制方面将变得有些许晦涩。当然，得益于 Java 后端的 Spring 项目的可插拔式接口以及前端大部分 SPA 的架构，权限控制也并没有变得那么的难以实现。相反，在我看来只要找到一个合适的插拔插件的入口，权限也可以做的很简单，跟业务只要少许的耦合即可实现我们熟悉的权限模块。
后端提供当前登录用户可访问的所有可访问资源接口信息，前端项目根据当前用户所拥有的接口信息，判断是否拥有菜单权限，如果拥有主要访问权限则加入路由，让用户可以访问其当前的页面。
由于 iview-admin 中，路由信息与菜单是同一份资料，所以在加入路由的时候，即可实现菜单的隐藏与现实。
按钮通过 vue 自定义指令绑定其特定的操作接口信息（如：产品上传按钮，需要拥有产品上传的信息，才可以继续执行按钮的业务逻辑）。在按钮或者 a 标签被渲染的时候，判断是否拥有权限，如若没有，可以隐藏，或者劫持原来绑定的点击事件，使其变成无权限的弹窗提示。
该指令支持 render 生成的按钮或者 a 标签。
数据的隐藏与否应该不会放在前端做吧...不然就是沙雕网友了。
这方面可以提供思路，在微服务架构中，如若前端项目拥有 NodeJS 做数据转换层，那是极好的。如果没有，则需要在微服务路由层做一些细微的改变。即用户无权限的数据列（属性）给他模糊掉，变成 * 或者 — 输出。这方面与前端无关，那么并不会在这里出现。
优点：
- 后端不再关注页面上的事情，基于权限代码让前端自己随心所欲编排
- 灵活性较高，可以控制页面上所有的元素，可以隐藏弹窗等等喜欢的功能
缺点：
- 编排路由的时候会显得繁琐，权限代码比较零散，开发完业务页面可能会忘记加上
公司实现并不能成为开源，所以我重新下载一份 iview-admin ，然后加入关键代码，来实现上面所需要的功能。
常规操作：
npm install
npm run dev正常打开窗口即可进行修改。
接下来就小步前进加入权限的功能。
权限提供了一个用户所拥有的所有权限列表以及一个 getters 后面会用到。
export default {
state: {
// { operatorCode: 'ProductEndpoint#upload', name: '产品上传' }
operatorList: []
},
getters: {
hasPermission: (state) => (queryOpcode) => {
if (!state.operatorList || !state.operatorList.length) {
return false
}
return state.operatorList.map(operatInfo => operatInfo.operatorCode).indexOf(queryOpcode) > -1
}
},
mutations: {
setPermissionList (state, opList) {
state.operatorList = opList
}
}
}在这里我定义简单的后端返回值：一个 operatorCode 代表某个操作的代号，一个 name 用于分配权限的时候给用户查看。
operatorCode 有很多中生成方式，我这里采用 SpringMVC 的 Controller 名 + # + 方法名 的形式， Controller 名用于分割不同资源的资源空间。使用 Spring 的生命周期函数，在项目启动的时候扫描，写入数据库，相当于所有的资源。后面的权限模型，以前该怎样就还是怎样，比如用户 —> 角色 —> 资源的模型。然后根据登陆的用户 ID 查询，返回给前端。至于中文名字，我们项目搭配 Swagger 使用，如果没有使用 Swagger 则需要使用自定义开发的注解指定。
注册到 store 中：
import Vue from 'vue'
import Vuex from 'vuex'
import user from './module/user'
import app from './module/app'
import permission from './module/permission'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//
},
mutations: {
//
},
actions: {
//
},
modules: {
user,
app,
permission
}
})静态操作数据：
// src/mock/data/permission-data.js
export const getPermissionCodeList = (userName) => {
if (String(userName) === '1') {
return [{ operatorCode: 'ProductManageEndpoint#createProduct', name: '产品上传' },
{ operatorCode: 'ProductManageEndpoint#putawayProduct', name: '产品上架' },
{ operatorCode: 'ProductManageEndpoint#delistProduct', name: '产品下架' }]
} else {
return [{ operatorCode: 'ProductManageEndpoint#createProduct', name: '产品上传' },
{ operatorCode: 'ProductManageEndpoint#delistProduct', name: '产品下架' },
{ operatorCode: 'ProductManageEndpoint#deleteByUuid', name: '产品删除' }]
}
}登陆操作：
// src/view/login/login.vue
...
handleSubmit ({ userName, password }) {
this.handleLogin({ userName, password }).then(res => {
this.getUserInfo().then(res => {
// 用户登陆成功时候加入操作Code
this.$store.commit('setPermissionList', getPermissionCodeList(userName))
this.$router.push({
name: this.$config.homeName
})
})
})
}加入用户列表的信息，不然不能登录，因为作者默认只放了两个，当然生产项目肯定不管这里啦~~
// src/mock/login.js
const USER_MAP = {
super_admin: {
name: 'super_admin',
user_id: '1',
access: ['super_admin', 'admin'],
token: 'super_admin',
avator: 'https://file.iviewui.com/dist/a0e88e83800f138b94d2414621bd9704.png'
},
admin: {
name: 'admin',
user_id: '2',
access: ['admin'],
token: 'admin',
avator: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
},
zhangsan: {
name: 'zhangsan',
user_id: '3',
access: ['super_admin', 'admin'],
token: 'zhangsan',
avator: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
},
lisi: {
name: 'lisi',
user_id: '4',
access: ['super_admin', 'admin'],
token: 'lisi',
avator: 'https://avatars0.githubusercontent.com/u/20942571?s=460&v=4'
}
}
...加入权限数据：
// src/mock/data/permission-data.js
export const getPermissionCodeList = (userName) => {
if (userName === 'zhangsan') {
return [{ operatorCode: 'ProductManageEndpoint#list', name: '产品列表' },
{ operatorCode: 'ProductManageEndpoint#createProduct', name: '产品上传' },
{ operatorCode: 'ProductManageEndpoint#putawayProduct', name: '产品上架' },
{ operatorCode: 'ProductManageEndpoint#delistProduct', name: '产品下架' }]
} else {
return [{ operatorCode: 'ProductManageEndpoint#createProduct', name: '产品上传' },
{ operatorCode: 'ProductManageEndpoint#delistProduct', name: '产品下架' },
{ operatorCode: 'ProductManageEndpoint#deleteByUuid', name: '产品删除' }]
}
}刚开始我们先设立一个口进入，由于项目的 menuList 挂载在 store 的 app.js 里面，所以我们需要在这里动刀。
这里修改造成两个事情：1. 清掉项目原来的 router 的菜单，但是还可以访问（因为内存加载了）；2. 我加入了需要权限管理的菜单，但是还不能访问，因为路由还没有。
// src/store/module/app.js
...
getters: {
menuList: (state, getters, rootState) => {
const allMenus = []
const menuWithPermission = getMenuWithPermissionByRouter(routersWithPermission, rootState.permission.operatorList)
allMenus.push(...menuWithPermission)
return allMenus
}
}
...那么这里用到一个函数 getMenuWithPermissionByRouter，我决定放在 util.js 即可
// src/libs/util.js
...
export const getMenuWithPermissionByRouter = (routerWithPermissionList, userOperatorList) => {
return []
}OK，运行项目。很好，没有出现错误，继续前行。
我的需求是这样的，当一个路由，在 meta 里面的 requireCode 用户拥有第一项操作权限的时候，是可以进入的，也就是菜单需要加载出来。
export default [
{
path: '/product',
name: 'product',
component: Main,
meta: {
hideInBread: true
},
children: [
{
path: 'list',
name: 'list',
meta: {
title: 'product-list',
requireCode: ['ProductManageEndpoint#list', 'ProductManageEndpoint#createProduct', 'ProductManageEndpoint#putawayProduct', 'ProductManageEndpoint#delistProduct', 'ProductManageEndpoint#deleteByUuid']
},
component: () => import('@/view/product/product-list.vue')
},
{
path: 'add',
name: 'add',
meta: {
title: 'product-add',
requireCode: ['ProductManageEndpoint#createProduct']
},
component: () => import('@/view/product/product-form.vue')
}
]
}
]当这个页面需要同时满足两个要求的资源操作的时候，第一项使用数组装载。即：
requireCode: [['ProductManageEndpoint#list', 'ProductManageEndpoint#createProduct'], 'ProductManageEndpoint#putawayProduct', 'ProductManageEndpoint#delistProduct', 'ProductManageEndpoint#deleteByUuid']那么这个页面需要同时满足前面两个的时候，才能加载出来。
那么开始编写 getMenuWithPermissionByRouter 函数。呃，怎么说呢，先把 Aresn 的代码拷过来改改满足我上面的需求即可：
/**
* 根据需要控制菜单的路由，获取菜单列表
* @param routerWithPermissionList 需要权限管理的路由
* @param userOperatorList 用户拥有的所有操作
* @returns {Array}
*/
export const getMenuWithPermissionByRouter = (routerWithPermissionList, userOperatorList) => {
// debugger
let res = []
const allOpCodeArr = userOperatorList.map(opCodeObj => opCodeObj.operatorCode)
forEach(routerWithPermissionList, item => {
if (!item.meta || (item.meta && !item.meta.hideInMenu)) {
let obj = {
icon: (item.meta && item.meta.icon) || '',
name: item.name,
meta: item.meta
}
if ((hasChild(item) || (item.meta && item.meta.showAlways))) {
obj.children = getMenuWithPermissionByRouter(item.children, userOperatorList)
}
if (hasThisMenuPermission(item, allOpCodeArr) || hasChild(item)) res.push(obj)
}
})
return res
}
const hasThisMenuPermission = (routerInfo, allOpCodeArr) => {
if (routerInfo.meta && routerInfo.meta.requireCode && routerInfo.meta.requireCode.length) {
const requireCode = routerInfo.meta.requireCode[0]
if (Array.isArray(requireCode)) {
let hasPermission = true
for (let i = 0; i < requireCode.length; i++) {
hasPermission = hasPermission && allOpCodeArr.indexOf(requireCode[i]) > -1
}
return hasPermission
} else {
return allOpCodeArr.indexOf(requireCode) > -1
}
} else return false
}OK，如图所示，已经把菜单加载出来了。但是现在出现一个问题，就是刷新页面的时候，什么都没了。因为刷新页面的时候，内存中的 store 被置空了。
// src/view/single-page/home/home.vue
...
mounted () {
// 需要在这里加载权限信息
const userName = this.$store.state.user.userName
this.$store.commit('setPermissionList', getPermissionCodeList(userName))
}
...可喜可贺，刷新的时候，菜单已经出来了。但是有个报错，报 sideMenu 的 undefined 异常。是由于刚开始刷新页面的时候，菜单还没有出来，而代码写死了读第0个元素，菜单是空数组，所以理所当然导致了异常。
// src/components/main/components/side-menu/side-menu.vue 第 20 行，去掉最后属性的或者即可
<a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :size="rootIconSize" :color="textColor" :type="item.icon"/></a>OK，我感觉最难的菜单搞定了。接下来要搞定路由。
有了前面的铺垫，我感觉路由要好做很多了。
动态路由有一个调用的函数是：
router.addRoutes(routes: Array<RouteConfig>)那么我们需要做的只是，获取有权限的路由，然后加入到 Vue 中。
但是这段代码有点问题就是每次进入都会调用一次= =
// src/view/single-page/home/home.vue
mounted () {
// 需要在这里加载权限信息
const userName = this.$store.state.user.userName
this.$store.commit('setPermissionList', getPermissionCodeList(userName))
const routers = getRouterWithPermission(routersWithPermission, this.$store.state.permission.operatorList)
const originRouteNames = this.$router.options.routes.map(r => r.name)
// 需要解决重复加入问题
if (routers && routers.length && originRouteNames.indexOf(routers[0].name) < 0) {
this.$router.addRoutes(routers)
}
}好了，菜单有了，路由有了，点击测试能否进入。
然后被作者的路由拦截到了-,-
// src/router/index.js
const turnTo = (to, access, next) => {
next() // 直接过。
}分别登陆 zhangsan 和 lisi 从上面的测试权限数据可以看到，lisi 是进入不了产品列表的。
强行进入：
OK，正确了，如果没有权限，肯定就没有页面嘛，直接404.
页面的跳转搞定了，接下来就要考虑按钮的问题了。那么上面设置的 Vuex 的 hasPermission 在这里派上用场。关于按钮的绑定，思路来源于 Vue 的自定义指令，只需要在主页面注册自定义指令，每次页面加载的时候，加载到指定指令的组件，开始读取这个组件的 operaCode 是否在当前登陆的用户中，如果存在，则继续执行，如果不存在，则拿到了节点的 Vnode 开始设置我们想要的东西，比如锁定按钮啊，劫持点击事件弹出提示，或者隐藏都可以。
// src/main.js
/**
* 注册权限控制指令
*/
Vue.directive('opcode', {
bind: function (el, opcode, vnode, oldVNode) {
const requireOpCode = opcode.value
// 如果用户没有这个操作Code的权限，那么劫持click事件，赋予弹出无权限弹窗的事件
console.log(requireOpCode);
if (vnode.componentInstance === undefined || vnode.componentInstance === null) {
if (!vnode.context.$store.getters.hasPermission(requireOpCode)) {
vnode.data.on.click.fns = function () {
Modal.warning({
title: '无权限',
content: '很抱歉，您没有这项操作的权限'
})
}
}
} else {
if (!vnode.componentInstance.$store.getters.hasPermission(requireOpCode)) {
vnode.componentInstance.$off('click')
vnode.componentInstance.$on('click', function () {
Modal.warning({
title: '无权限',
content: '很抱歉，您没有这项操作的权限'
})
})
}
}
}
})常规按钮使用：
<!-- src/view/product/components/toolbars.vue -->
<Button v-opcode="'ProductManageEndpoint#createProduct'" type="primary" class="btn" icon="ios-arrow-up" @click="$router.push('/product/add')">上传新商品</Button>Render 函数中使用：
// src/view/product/product-list.vue
prodColumns: [
{
title: '商品名称',
key: 'pname',
align: 'center',
width: 300
},
{
title: '操作',
key: 'operator',
align: 'center',
render: (h, params) => {
return h('a', {
attrs: {
href: 'javascript:;'
},
on: {
click: () => {
this.handleEditProduct(params.row)
}
},
// 在这里注册自定义指令
directives: [
{
name: 'opcode',
value: 'ProductManageEndpoint#updateByUuid'
}
]
}, '编辑')
}
}
],这种方式即使分页，改变表格数据，也可以被主页面上的判断监听到。
PS：在这里就可以看到了按钮的编排的问题，即我们新增产品的页面接口，是在填写完 Form 表单的时候才开始请求的，但是我们需要在两个地方做设置，一个是跳转页面（路由+菜单），一个是新增产品的按钮，即需要把这个权限拦截提前到进入页面之前。这方面现在确实想不到更好的解决办法了。
回顾一下权限设置数据：
export const getPermissionCodeList = (userName) => {
if (userName === 'zhangsan') {
return [{ operatorCode: 'ProductManageEndpoint#list', name: '产品列表' },
{ operatorCode: 'ProductManageEndpoint#createProduct', name: '产品上传' },
{ operatorCode: 'ProductManageEndpoint#putawayProduct', name: '产品上架' },
{ operatorCode: 'ProductManageEndpoint#delistProduct', name: '产品下架' }]
} else {
return [{ operatorCode: 'ProductManageEndpoint#createProduct', name: '产品上传' },
{ operatorCode: 'ProductManageEndpoint#delistProduct', name: '产品下架' },
{ operatorCode: 'ProductManageEndpoint#deleteByUuid', name: '产品删除' }]
}
}我们知道，用户名为 zhangsan 是没有删除产品权限以及编辑产品的，但是前面的都有。而 lisi 用户，没有产品列表功能，所以列表都不可以进去。
zhangsan 用户界面：
lisi 用户界面：
我们知道，经典权限模型是用户、角色、资源的编排。那么我们可以设置一系列的角色，当然记得给自己预留一个流氓角色可以读取所有资源和角色的，利于管理。每个角色可以绑定不同的资源，也可以绑定不同的用户。这样用户一旦登陆，即可读取所有角色中的所有资源操作（记得去重）。
我们公司的绑定界面，通过读取用户所拥有的所有资源，再把 router 中绑定的读取出来（当然过滤掉当前绑定用户无权限的），然后通过加载勾选，最后发送请求给服务器做修改。这样设置可以无限极下限，只要赋予用户授权的权限，用户即可一直创建然后绑定他想绑定的。
当前所做的都是前端需要做的工作，后端也需要配合完成接口的调用，即使前端做了设置，但是有些用户可以绕过前端，这时候所有的权限操作就需要后端来拦截了。