基本上以前前后端在同一个项目里走过的坑，在前后端分离的项目里，还是会再走一遍。比如说常规功能里的权限控制。
iView Admin这个项目是个相当完善的开箱即用框架，所以它是自带有权限控制的基础逻辑的，比如它说明文档中提到的“整个页面权限控制（基于路由）”和“单个组件浏览控制（基于每个页面中的v-if单独判断）”，在一定程度上是满足需求的，无非就是可能需要在每个页面里单独写上组件判断的v-if。个人觉得有些零散，于是想能不能全局加个用于组件浏览控制的自定义指令，便于作为一个统一控制组件浏览权限的入口。
说干就干，一般这种全局自定义指令，是在main.js里进行定义和声明的，main.js中代码如下
image.png
红框部分就是原来iView Admin已经做的注册指令逻辑，所以如果现在我也想注册个全局指令的话，就跟着它操作，在direcvtive里面增加所需内容就好了。
然后我们看下这个direcvtive里有什么？
在directive文件夹下，有个directives.js,里面定义具体的全局指令的逻辑。有个index.js，注册自定义指令，让全局可见。
directives.js里新增以下代码：
permission:{
inserted(el, binding, vnode) {
const { value } = binding
let needRoles = value.needRoles //该组件显示时需要满足的权限组,如[’super_admin’,’admin']
let userRoles = value.userRoles //当前用户所拥有的权限组，如[’super_admin’,’user']
console.log('directives permission value '+JSON.stringify(value))
if (userRoles && userRoles instanceof Array && userRoles.length > 0) {
const permissionRoles = needRoles
const hasPermission = userRoles.some(role => {
return permissionRoles.includes(role)
})
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`need roles values`)
}
}
}
然后在index.js里增加注册这个permission指令
/**
* 用于组件权限判断指令
*/
Vue.directive('permission', directive.permission)
这样，就可以直接在组件里，像使用v-if那样直接使用v-permission指令来控制组件是否可见。
举个例子：
<tempalate>
<Button v-permission="{'needRoles':['normal_user'],'userRoles':[`${this.$store.state.user.access}`]}" type="error”>
受权限控制的按钮</Button>
</template>
网友评论