vue权限管控permission实现

vue项目实现不同用户角色权限管控：

第一种方式：自定义指令实现用户角色权限控制v-permission：

实现方法：Vue.directive+install+Vue.use

步骤：1. 新建permission.js 实现自定义指令的钩子方法：

import store from '@/store'

export default {
  inserted(el, binding) {
    const { value } = binding
    const roles = store.getters && store.getters.roles
    if (value && value instanceof Array) {
      if (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(`使用方式： v-permission="['admin','editor']"`)
    }
  }
}

2. 新建index.js 将permission转为install：

import permission from './permission'

const install = function(Vue) {
  Vue.directive('permission', permission)
}

if (window.Vue) {
  window['permission'] = permission
  Vue.use(install); // eslint-disable-line
}

permission.install = install
export default permission

3. 在main.js中用use方法使用permission：

// 权限指令
import permission from './components/Permission'
Vue.use(permission)

4. 在模板中使用v-permission控制访问权限:

<el-button
        slot="left"
        v-permission="['admin', 'storage:add']"
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="mainadd = true"
        >添加</el-button
      >

第二种方式：Vue.prototype+install+v-if实现用户角色权限控制：

1. 新建permission.js，将checkPer方法注册到Vue.prototype，并注册为install方法：

import store from '@/store'

/**
 * @param {Array} value
 * @returns {Boolean}
 * @example see @/views/permission/directive.vue
 */
export default {
  install(Vue) {
    Vue.prototype.checkPer = (value) => {
      if (value && value instanceof Array && value.length > 0) {
        const roles = store.getters && store.getters.roles
        const permissionRoles = value
        return roles.some(role => {
          return permissionRoles.includes(role)
        })
      } else {
        console.error(`need roles! Like v-permission="['admin','editor']"`)
        return false
      }
    }
  }
}

2. 在main.js中引入permission, 并用use方法:

// 权限指令
import checkPer from '@/utils/permission'
Vue.use(checkPer)

3. 使用：配合 v-if 在模板中实现权限控制：

<el-table-column v-if="checkPer(['admin','app:edit','app:del'])" label="操作" width="150px" align="center">