Vue~添加按钮权限~通过自定义指令
1、需求
客户：需要把导入、删除权限化；指定人员有权限；
2、思路
后台有一个接口，是可以查询到当前登录人的权限；
前端方案：
1、每到一个页面就请求一次接口是否有权限；（太麻烦了）
2、自定义指令 · Vue.directive；（一次请求，一直用）
3、代码实现
1、自定义指令
创建 /directive/permission/hasPermi 文件 //用来获取权限数据 import store from '@/store' export default { inserted(el, binding, vnode) { //获取绑定值 const { value } = binding // TODO 匹配规则，在页面写的要对应这个匹配规则 const all_permission = "*:*:*"; //获取用户权限数据 const permissions = store.getters && store.getters.permissions if (value && value instanceof Array && value.length > 0) { //权限标志 const permissionFlag = value //判断用户是否有此权限 const hasPermissions = permissions.some(permission => { console.log('permission', permission); return all_permission === permission || permissionFlag.includes(permission) }) //没有权限-移除页面上的控件 if (!hasPermissions) {{ console.log('没有权限-移除'); el.parentNode && el.parentNode.removeChild(el) } } else { el.parentNode && el.parentNode.removeChild(el) throw new Error(`请设置数组操作权限`) } } }
2、注册指令
创建 /directive/permission/index文件 import hasPermi from './hasPermi' import Vue from "vue" const install = function (Vue) { Vue.directive('hasPermi', hasPermi) } if (window.Vue) { window['hasPermi'] = hasPermi Vue.use(install); } export default install
3、在main.js里面进行全局注册
import permission from './directive/permission'
Vue.use(permission)
vue官网对指令的解释
https://cn.vuejs.org/v2/guide/custom-directive.html
4、使用方法
<button v-has-permi="['btn:pre:del']" style="margin-top: 4px"/> <button v-has-permi="['btn:pre:export']" style="margin-top: 4px"/>
