vue2 权限管理

1.创建一个自定义指令进行不同等级用户的权限判断

在src/utils/permission.js中写入自定义指令代码

// v-promission 自定义指令
export const permission = {
  inserted (el, binding, vnode) {
    const { value } = binding // value是vue页面使用自定义指令时传过来的数组
    // 这里的user是在登陆页面，登陆成功后获取的，其中包含用户级别字段
    const roles = JSON.parse(localStorage.getItem('user')).roles // 后台返回的roles数组
    if (value && value instanceof Array && value.length > 0) {
      const permissionRoles = value
      const hasPermission = roles.some(role => {
        return permissionRoles.includes(role)
      })
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('need roles! Like v-permission="[\'admin\', \'editor\']"')
    }
  }
}

2.在main.js中导入permission，并创建一个自定义指令

import { permission } from '@/utils/permission'
Vue.directive('permission', permission)

3.在对应的vue组件中使用自定义权限指令

比如下方是看用户是否有新增权限

<el-button @click="addUser" v-permission="['admin', 'user:add']">新增</el-button>