今天要谈的不是前端鉴权这个比较大的话题，而是谈前端权限的控制。
在项目中遇到一个问题是管理员才有新建专辑按钮，普通用户没有。
那么如何展示呢？
在前端领域，一般会有两种权限控制方法，一种是根据路由权限控制，另一种是结构的显示隐藏。现在遇到的这个问题，显然用第二种方法控制最简单。
因此，就在页面中写一个方法。判断是否有权限，然后在按钮上v-if一个data属性。
但是这种方案有一个弊端，就是每个页面都需要写这样的方法和属性（当然可以用mixin来实现）
因此，更简便的方案是什么呢？自定义指令
开发一个自定义指令
首先添加判断是否有权限的方法：
import Vue from 'vue'
import store from '@/store'
// 是否有权限
const hasPermission = (userPermission, permissionsList = []) => {
let userPermissionList = Array.isArray(userPermission) ? userPermission : [userPermission];
return userPermissionList.some(e => permissionsList.includes(e));
};
定义一个指令：
Vue.directive('permission', {
bind: (el, binding, vnode) => {
store.dispatch('clad/db/get', {
dbName: 'sys',
path: 'user.info',
defaultValue: {},
user: true
}, {root: true}).then(res => {
if (Object.prototype.toString.call(binding.value) === '[object Array]') {
if (!hasPermission(res.data_range, binding.value)) {
el.parentNode.removeChild(el);
}
} else {
if (!hasPermission(binding.value, res.permissions)) {
el.parentNode.removeChild(el);
}
}
});
}
})
可以看到，当用户权限列表不包含传入的字符串时，就将这个元素删除掉。
在项目最外层的main.js中引入这个指令。那么在我们需要用到这个权限指令的时候就可以这样使用：
<el-button @click="handleAddAlbum" v-permission="'管理素材专辑'" size="medium" type="primary">
<i class="btn_add_icon"></i>新增专辑
</el-button>
至此，这就是利用自定义指令控制前端权限的方案
