vue2 - 权限控制指令

1. 说明

原理：

1. 标记元素或组件，哪些角色可以使用
2. 在指令的 inserted 生命周期函数中，进行权限判断
   • 无权限，则删除 DOM 节点

2. 使用

<template>
  <div>游客可以看</div>
  <div v-permission="['admin', 'superAdmin']">管理员才可以看</div>
</template>

定义指令：

// permission.js
export default function install(Vue, store) {
  Vue.directive('permission', {
    inserted(element, binding) {
      const rolesList = binding.value || [];

      if (rolesList.length === 0) {
        console.warn('v-permission need expression!');
        return;
      }

      const userRole = store.state.userRole;

      const hasPermission = rolesList.includes(userRole);

      if (!hasPermission) {
        element.parentElement.removeChild(element);
      }
    },
  });
}

安装指令：

// main.js
import Vue from 'vue';
import store from './store/store';

import permission from './directives/permission'

Vue.use(permission, store);