在什么网站可以接设计做,农行网站不出动画怎么做,做网站哪个公司好 快选宁陵建站宝,垫江网站建设djrckj使用场景#xff1a;在我们的系统中#xff0c;有的用户有创建权限#xff0c;有的用户没有创建权限。
分析#xff1a;后端一般会在登录完成后将该用户的权限资源列表一次性返回给前端#xff0c;因此#xff0c;可以先把权限资源列表保存在vuex#xff08;pinia…使用场景在我们的系统中有的用户有创建权限有的用户没有创建权限。
分析后端一般会在登录完成后将该用户的权限资源列表一次性返回给前端因此可以先把权限资源列表保存在vuexpinia中因为这个信息我们后面会经常用到。再通过vue自定义指令来判断是否存在该权限即可。
拓展一下vue指令的钩子函数
bind--指令绑定到元素之上的时候触发 只执行一次unbind--指令被移出的时候触发 只执行一次update--所有节点更新的时候执行componentUpdate--指令所在节点以及所有子节点都更新完成的时候执行inserted--绑定指令的元素在页面展示的时候执行
vue自定义指令具体操作步骤
import store from /storeexport 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 ./hasAnyPermsconst install function (Vue) {Vue.directive(hasAnyPerms, hasAnyPerms)
}if (window.Vue) {window[hasAnyPerms] hasAnyPermsVue.use(install); // eslint-disable-line
}hasAnyPerms.install install
export default hasAnyPerms
最后在页面上去使用
