vue3 指令鉴权（权限控制）

权限控制

<hasPerm.js>
import useUserStore from '@/store/modules/user'
export default {mounted(el, binding, vnode) {const { value } = bindingconst all_permission = "*-*-*";const permissions = useUserStore().permissionsif (value && value instanceof Array && value.length > 0) {const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}

<store->user.js>
//拿到permissions对象列表
// 获取用户信息getInfo() {return new Promise((resolve, reject) => {getInfo().then(res => {const user = res.userconst avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组this.roles = res.rolesthis.permissions  = res.permissions} else {this.roles = ['ROLE_DEFAULT']}this.name = user.userNamethis.avatar = avatar;resolve(res)}).catch(error => {reject(error)})})},

引入：app全局（index.js）

import hasPerm from './hasPerm'export default function directive(app){app.directive('hasPerm', hasPerm)
}

使用如下：
['tool-gen-code']就等于上面hasPerm.js-->mounted中的binding.value

<el-buttontype="primary"plainv-hasPerm="['tool-gen-code']">按钮</el-button>

大致流程：首先在store中存储用户具有的权限列表，然后在hasPerm.js中引入该权限列表进行权限过滤，然后将所写逻辑导出，在index.js中引入注册全局指令。

最后展示一下目录：

摩托车部落