vue 权限处理
最近在做关于vue的权限处理的内容,做完之后来总结一下
关于此次vue权限我主要分为三个模块来讲解
- 1.菜单权限
- 2.按钮显示权限
- 3.路由跳转权限
整体思路: 登录–>获取用户信息,菜单以及对应的功能code。所谓功能code就是每一功能都对应的一项功能,如下图所示,对于公寓管理模块,我只有查看的功能,code为 apartment_view,我们登录的时候后台会返给我们一系列的code,[‘apartment_view’,‘apartment_add’],如果我们的code可以在该code列表中找到,即可以匹配功能;还有就是路由拦截,首先把我们的路由去匹配大菜单,如果匹配得到,那就直接路由跳转,如果匹配不大,那就去看功能菜单里是否可以访问通过,比如apartment_add功能对应的页面有多个,如:“add_step1”,“add_step2”,“add_step3”,只要我们能通过url找到对应的code,再和权限code进行对比即可,下面将详细的去说明以及代码
1.菜单权限
菜单权限比较简单 就是正常的根据权限配置的路由菜单,登录的时候又后端返回list,然后渲染到菜单,在这里就不重点提出了
2.按钮显示
这里的按钮权限主要是通过后台返回的code,比如新增文章是add_code,这个时候我们是通过绑定了自定义指令去判断后台返回的code是否包含该code,如果不包含,即移除该元素 ,代码如下
// 绑定权限code
<button v-has="'add_code'">新增文章</button>
// 多code通过-去连接
<button v-has="'add_code-delete_code'">新增文章</button>
// 自定义指令
import Vue from 'vue'
import {
Base64 } from 'js-base64'
/**权限指令**/
const has = Vue.directive('has', {
inserted: function (el, binding, vnode) {
// 获取页面按钮权限
if (!Vue.prototype.$_has(binding.value)) {
// 不满足条件 移除该元素
el.parentNode.removeChild(el);
}
}
});
// 权限检查方法
Vue.prototype.$_has =