使用场景：在我们的系统中，有的用户有创建权限，有的用户没有创建权限。
分析：后端一般会在登录完成后将该用户的权限资源列表一次性返回给前端，因此，可以先把权限资源列表保存在vuex（pinia）中，因为这个信息我们后面会经常用到。再通过vue自定义指令来判断是否存在该权限即可。
拓展一下：vue指令的钩子函数
- bind--指令绑定到元素之上的时候触发 只执行一次
- unbind--指令被移出的时候触发 只执行一次
- update--所有节点更新的时候执行
- componentUpdate--指令所在节点以及所有子节点都更新完成的时候执行
- inserted--绑定指令的元素在页面展示的时候执行
vue自定义指令具体操作步骤：
import store from '@/store'export default {// 绑定指令的元素在页面展示的时候执行inserted (el, binding, vnode) {const { value } = binding// 获取到store中的权限资源列表const permissionList = store.getters && store.getters.permissionsif (value && value instanceof Array && value.length > 0) {const permissions = valueconst hasAnyPerms = permissionList.some(permission => {return permissions.includes(permission)})// 如果不存在权限，则将此节点移除if (!hasAnyPerms) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`need permissions! Like v-hasAnyPerms="['org:create','org:update']"`)}}
}
然后去使用并暴露这个指令
import hasAnyPerms from './hasAnyPerms'const install = function (Vue) {Vue.directive('hasAnyPerms', hasAnyPerms)
}if (window.Vue) {window['hasAnyPerms'] = hasAnyPermsVue.use(install); // eslint-disable-line
}hasAnyPerms.install = install
export default hasAnyPerms最后在页面上去使用
