添加v-permission指令

frontend/src/performance/components/settings/SettingMenu.vue

@@ -5,9 +5,9 @@
                 <font-awesome-icon class="icon account" :icon="['far', 'address-card']" size="lg"/>
                 <span>账号</span>
             </template>
-            <el-menu-item index="/setting/user">用户</el-menu-item>
-            <el-menu-item index="/setting/testresourcepool">测试资源池</el-menu-item>
-            <el-menu-item index="/setting/organization">组织</el-menu-item>
+            <el-menu-item index="/setting/user" v-permission="['admin']">用户</el-menu-item>
+            <el-menu-item index="/setting/testresourcepool" v-permission="['admin','org_admin']">测试资源池</el-menu-item>
+            <el-menu-item index="/setting/organization" v-permission="['test_user']">组织</el-menu-item>
             <el-menu-item index="/setting/workspace">工作空间</el-menu-item>
             <el-menu-item>API Keys</el-menu-item>
         </el-submenu>

frontend/src/performance/main.js

@@ -6,10 +6,11 @@ import filters from "../common/filter";
 import ajax from "../common/ajax";
 import App from './App.vue';
 import router from "./components/router/router";
-import store from './store'
 import './permission' // permission control
 import i18n from "../i18n/i18n";
 import timestampFormatDate from "./components/common/filter/TimestampFormatDateFilter";
+import store from "./store";
+import {permission} from './permission'
 
 Vue.config.productionTip = false;
 Vue.use(icon);
@@ -22,6 +23,9 @@ Vue.use(ajax);
 // filter
 Vue.filter('timestampFormatDate', timestampFormatDate);
 
+// v-permission
+Vue.directive('permission', permission)
+
 new Vue({
   el: '#app',
   router,

frontend/src/performance/permission.js

@@ -1,10 +1,29 @@
 import router from './components/router/router'
 import Cookies from 'js-cookie' // get token from cookie
 import {TokenKey} from '../common/constants';
-
+import store from "./store";
 
 const whiteList = ['/login']; // no redirect whitelist
 
+export const permission = {
+  inserted(el, binding) {
+    const { value } = binding
+    // user role list
+    const roles = store.state.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']"`)
+    }
+  }
+}
+
 router.beforeEach(async (to, from, next) => {
 
   // determine whether the user has logged in
@@ -16,7 +35,7 @@ router.beforeEach(async (to, from, next) => {
     } else {
       // const roles = user.roles.filter(r => r.id);
       // TODO 设置路由的权限
-
+      store.commit("setRoles", user.roles.map(r => r.id))
       next()
     }
   } else {

frontend/src/performance/store.js

@@ -3,6 +3,17 @@ import Vuex from 'vuex'
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({})
+const store = new Vuex.Store({
+  state: {
+    roles: []
+  },
+  mutations: {
+    setRoles(state, data) {
+      state.roles = data
+    }
+  }
+})
+
+export default store