权限控制
<hasPerm.js>
import useUserStore from '@/store/modules/user'
export default {
mounted(el, binding, vnode) {
const { value } = binding
const all_permission = "*-*-*";
const permissions = useUserStore().permissions
if (value && value instanceof Array && value.length > 0) {
const permissionFlag = value
const 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.user
const 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.roles
this.permissions = res.permissions
} else {
this.roles = ['ROLE_DEFAULT']
}
this.name = user.userName
this.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-button
type="primary"
plain
v-hasPerm="['tool-gen-code']"
>按钮</el-button>
大致流程:首先在store中存储用户具有的权限列表,然后在hasPerm.js中引入该权限列表进行权限过滤,然后将所写逻辑导出,在index.js中引入注册全局指令。
最后展示一下目录: