vue实现按钮功能级权限控制

た入场券 2022-09-10 03:24 208阅读 0赞

# 合适的位置接口获取权限信息，比如登录接口 #

\#\#\#\#这里简化了代码\#\#\#\#\#\#  
function \_queryPermissionList(to, next) \{  
return new Promise((resolve, reject) => \{  
queryPermissionList().then(res => \{  
let permissionsList = res.permissionList;  
store.commit("user/SET\_PERMISSION", permissionsList ? permissionsList : \[\]);  
resolve()  
\}).catch(err => \{  
reject(err)  
\})  
\})  
\}

// 定义一些和权限有关的 Vue指令

// 必须包含列出的所有权限，元素才显示  
export const hasPermission = \{  
install(Vue) \{  
Vue.directive('hasPermission', \{  
bind(el, binding, vnode) \{  
const permissions = vnode.context.$store.state.user.permissions  
const value = binding.value  
let flag = true  
for (const v of value) \{  
if (!permissions.includes(v)) \{  
flag = false  
\}  
\}  
if (!flag) \{  
if (!el.parentNode) \{  
el.style.display = 'none'  
\} else \{  
el.parentNode.removeChild(el)  
\}  
\}  
\}  
\})  
\}  
\}

// 当不包含列出的权限时，渲染该元素  
export const hasNoPermission = \{  
install(Vue) \{  
Vue.directive('hasNoPermission', \{  
bind(el, binding, vnode) \{  
const permissions = vnode.context.$store.state.user.permissions

const value = binding.value  
let flag = true  
for (const v of value) \{  
if (permissions.includes(v)) \{  
flag = false  
\}  
\}  
if (!flag) \{  
if (!el.parentNode) \{  
el.style.display = 'none'  
\} else \{  
el.parentNode.removeChild(el)  
\}  
\}  
\}  
\})  
\}  
\}

// 只要包含列出的任意一个权限，元素就会显示  
export const hasAnyPermission = \{  
install(Vue) \{  
Vue.directive('hasAnyPermission', \{  
bind(el, binding, vnode) \{  
const permissions = vnode.context.$store.state.user.permissions  
const value = binding.value  
let flag = false  
for (const v of value) \{  
if (permissions.includes(v)) \{  
flag = true  
\}  
\}  
if (!flag) \{  
if (!el.parentNode) \{  
el.style.display = 'none'  
\} else \{  
el.parentNode.removeChild(el)  
\}  
\}  
\}  
\})  
\}  
\}