关于前端后台管理系统Vue自定义用户权限指令1.0

 

前言： 后台管理系统里面权限是十分重要的，也是前端必须掌握的，虽然有些项目后端会定义权限，但是前端这边也需要同意进行权限的判断进行双重保险。

 

 0. 首先 后台数据（我们是每个模块都有自己权限名称，根据各自的情况可以简化）

1. 前台自定义指令

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

// 必须包含列出的所有权限，元素才显示
export const hasPermission = {
// 自定义指令API
  install(Vue) {
    Vue.directive('hasPermission', {
      bind(el, binding, vnode) {
        // console.log(vnode.context.$store.state.account.permissions)
        // 所有用户权限数组
        const permissions = vnode.context.$store.state.account.permissions
        console.log(permissions)
        // 当前页面权限数组
        const value = binding.value
        let flag = true
        for (const v of value) {
          // 如果该用户有当前权限则等于false
          if (!permissions.includes(v)) {
            flag = false
          }
        }
        if (!flag) {
          // 如果没有父级就隐藏该DOM元素
          if (!el.parentNode) {
            el.style.display = 'none'
          } else {
            // 如果有就让父级元素删除自己
            el.parentNode.removeChild(el)
          }
        }
      }
    })
  }
}

2.页面应用