diff --git a/frontend/src/business/components/common/head/HeaderOrgWs.vue b/frontend/src/business/components/common/head/HeaderOrgWs.vue
index 1d315cd757..f8ecb7501b 100644
--- a/frontend/src/business/components/common/head/HeaderOrgWs.vue
+++ b/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)">
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index baca430ae9..2783d1f491 100644
--- a/frontend/src/business/main.js
+++ b/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,
diff --git a/frontend/src/business/permission.js b/frontend/src/business/permission.js
index 21f584f30f..4c0ef460d3 100644
--- a/frontend/src/business/permission.js
+++ b/frontend/src/business/permission.js
@@ -1,24 +1,38 @@
 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) {
-    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)
-      });
-      if (!hasPermission) {
-        el.parentNode && el.parentNode.removeChild(el)
-      }
-    } else {
-      throw new Error(`need roles! Like v-permission="['admin','editor']"`)
+    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;
+    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']"`)
   }
 }