修改权限指令

frontend/src/business/components/common/head/HeaderOrgWs.vue

@@ -4,7 +4,7 @@
            background-color="#2c2a48"
            text-color="#fff">
     <el-submenu index="1" popper-class="submenu"
-                v-permission="['org_admin', 'test_manager', 'test_user', 'test_viewer']">
+                v-roles="['org_admin', 'test_manager', 'test_user', 'test_viewer']">
       <template v-slot:title>{{$t('commons.organization')}}: {{currentOrganizationName}}</template>
       <label v-for="(item,index) in organizationList" :key="index">
         <el-menu-item @click="changeOrg(item)">{{item.name}}
@@ -13,7 +13,7 @@
         </el-menu-item>
       </label>
     </el-submenu>
-    <el-submenu index="2" popper-class="submenu" v-permission="['test_manager', 'test_user', 'test_viewer']">
+    <el-submenu index="2" popper-class="submenu" v-roles="['test_manager', 'test_user', 'test_viewer']">
       <template v-slot:title>{{$t('commons.workspace')}}: {{currentWorkspaceName}}</template>
       <label v-for="(item,index) in workspaceList" :key="index">
         <el-menu-item @click="changeWs(item)">

frontend/src/business/main.js

@@ -10,7 +10,7 @@ import router from "./components/common/router/router";
 import './permission' // permission control
 import i18n from "../i18n/i18n";
 import store from "./store";
-import {permission} from './permission'
+import {permission, roles} from './permission'
 import chart from "../common/js/chart";
 import CalendarHeatmap from "../common/js/calendar-heatmap";
 import '../common/css/menu-header.css';
@@ -32,6 +32,9 @@ Vue.use(CKEditor);
 // v-permission
 Vue.directive('permission', permission);
 
+// v-roles
+Vue.directive('roles', roles);
+
 new Vue({
   el: '#app',
   router,

frontend/src/business/permission.js

@@ -1,25 +1,39 @@
 import router from './components/common/router/router'
 import {TokenKey} from '../common/js/constants';
+import {hasRolePermissions, hasRoles} from "../common/js/utils";
 
 const whiteList = ['/login']; // no redirect whitelist
 
 export const permission = {
   inserted(el, binding) {
+    checkRolePermission(el, binding, 'permission');
+  }
+};
+
+export const roles = {
+  inserted(el, binding) {
+    checkRolePermission(el, binding, 'roles');
+  }
+};
+
+function checkRolePermission(el, binding, type) {
   const { value } = binding;
   const rolesString = localStorage.getItem("roles");
   const roles = rolesString.split(',');
   if (value && value instanceof Array && value.length > 0) {
     const permissionRoles = value;
-      const hasPermission = roles.some(role => {
-        return permissionRoles.includes(role)
-      });
+    let hasPermission = false;
+    if (type === 'roles') {
+      hasPermission  = hasRoles(...permissionRoles);
+    } else if (type === 'permission') {
+      hasPermission = hasRolePermissions(...permissionRoles);
+    }
     if (!hasPermission) {
       el.parentNode && el.parentNode.removeChild(el)
     }
   } else {
     throw new Error(`need roles! Like v-permission="['admin','editor']"`)
   }
-  }
 }
 
 router.beforeEach(async (to, from, next) => {