Normalize permission model

src/containers/DefaultContainer.vue

@@ -37,7 +37,10 @@ import DefaultHeader from './DefaultHeader';
 import DefaultFooter from './DefaultFooter';
 import EventBus from '../shared/eventbus';
 import ProfileEditModal from '../views/components/ProfileEditModal';
-import * as permissions from '../shared/permissions';
+import PERMISSIONS, {
+  hasComplexPermission,
+  hasPermission,
+} from '../shared/permissions';
 
 export default {
   name: 'DefaultContainer',
@@ -64,7 +67,6 @@ export default {
           name: this.$t('message.dashboard'),
           url: '/dashboard',
           icon: 'icon-speedometer',
-          permission: permissions.VIEW_PORTFOLIO,
         },
         {
           title: true,
@@ -74,37 +76,35 @@ export default {
             element: '',
             attributes: {},
           },
-          permission: permissions.VIEW_PORTFOLIO,
         },
         {
           name: this.$t('message.projects'),
           url: '/projects',
           icon: 'fa fa-sitemap',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.PROJECT_READ,
         },
         {
           name: this.$t('message.components'),
           url: '/components',
           icon: 'fa fa-cubes',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.PROJECT_READ,
         },
         {
           name: this.$t('message.vulnerabilities'),
           url: '/vulnerabilities',
           icon: 'fa fa-shield',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.VULNERABILITY_MANAGEMENT,
         },
         {
           name: this.$t('message.licenses'),
           url: '/licenses',
           icon: 'fa fa-balance-scale',
-          permission: permissions.VIEW_PORTFOLIO,
         },
         {
-          name: 'Tags',
+          name: this.$t('message.tags'),
           url: '/tags',
           icon: 'fa fa-tag',
-          permission: permissions.VIEW_PORTFOLIO,
+          permission: PERMISSIONS.TAG_MANAGEMENT,
         },
         {
           title: true,
@@ -115,21 +115,22 @@ export default {
             attributes: {},
           },
           permissions: [
-            permissions.VIEW_VULNERABILITY,
-            permissions.VIEW_POLICY_VIOLATION,
+            PERMISSIONS.PROJECT_READ,
+            PERMISSIONS.FINDING_READ,
+            PERMISSIONS.POLICY_VIOLATION_READ,
           ],
         },
         {
           name: this.$t('message.vulnerability_audit'),
           url: '/vulnerabilityAudit',
           icon: 'fa fa-tasks',
-          permission: permissions.VIEW_VULNERABILITY,
+          permissions: [PERMISSIONS.PROJECT_READ, PERMISSIONS.FINDING_READ],
         },
         {
           name: this.$t('message.policy_violation_audit'),
           url: '/policyViolationAudit',
           icon: 'fa fa-fire',
-          permission: permissions.VIEW_POLICY_VIOLATION,
+          permission: PERMISSIONS.POLICY_VIOLATION_READ,
         },
         {
           title: true,
@@ -139,37 +140,19 @@ export default {
             element: '',
             attributes: {},
           },
-          permission: [
-            permissions.SYSTEM_CONFIGURATION,
-            permissions.SYSTEM_CONFIGURATION_CREATE,
-            permissions.SYSTEM_CONFIGURATION_READ,
-            permissions.SYSTEM_CONFIGURATION_UPDATE,
-            permissions.SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: PERMISSIONS.SYSTEM_CONFIGURATION,
         },
         {
           name: this.$t('message.policy_management'),
           url: '/policy',
           icon: 'fa fa-list-alt',
-          permission: [
-            permissions.POLICY_MANAGEMENT,
-            permissions.POLICY_MANAGEMENT_CREATE,
-            permissions.POLICY_MANAGEMENT_READ,
-            permissions.POLICY_MANAGEMENT_UPDATE,
-            permissions.POLICY_MANAGEMENT_DELETE,
-          ],
+          permission: PERMISSIONS.POLICY_MANAGEMENT,
         },
         {
           name: this.$t('message.administration'),
           url: '/admin',
           icon: 'fa fa-cogs',
-          permission: [
-            permissions.SYSTEM_CONFIGURATION,
-            permissions.SYSTEM_CONFIGURATION_CREATE,
-            permissions.SYSTEM_CONFIGURATION_READ,
-            permissions.SYSTEM_CONFIGURATION_UPDATE,
-            permissions.SYSTEM_CONFIGURATION_DELETE,
-          ],
+          permission: PERMISSIONS.SYSTEM_CONFIGURATION,
         },
       ],
     };
@@ -229,9 +212,8 @@ export default {
   },
   mounted() {
     this.isSidebarMinimized =
-      localStorage && localStorage.getItem('isSidebarMinimized') !== null
-        ? localStorage.getItem('isSidebarMinimized') === 'true'
-        : false;
+      localStorage?.getItem('isSidebarMinimized') === 'true';
+
     const sidebar = document.body;
     if (sidebar) {
       if (this.isSidebarMinimized) {
@@ -259,21 +241,21 @@ export default {
       }
     },
     permissibleNav() {
-      let decodedToken = permissions.decodeToken(permissions.getToken());
-      let array = [];
-      for (const item of this.nav) {
+      return this.nav.filter((item) => {
+        if (item.permission && !hasPermission(item.permission)) {
+          return false;
+        }
+        if (item.permissions && !hasPermission(item.permissions)) {
+          return false;
+        }
         if (
-          (item.permission !== null &&
-            permissions.hasPermission(item.permission, decodedToken)) ||
-          (Object.prototype.hasOwnProperty.call(item, 'permissions') &&
-            item.permissions.some((permission) =>
-              permissions.hasPermission(permission, decodedToken),
-            ))
+          item.complexPermission &&
+          !hasComplexPermission(item.complexPermission)
         ) {
-          array.push(item);
+          return false;
         }
-      }
-      return array;
+        return true;
+      });
     },
   },
   created() {

src/directives/VuePermission.js

@@ -2,34 +2,44 @@
  * Permissions Vue Directive
  */
 import Vue from 'vue';
-import { hasPermission, decodeToken, getToken } from '../shared/permissions';
+import { hasPermission, hasComplexPermission } from '../shared/permissions';
 
-Vue.directive('permission', function (el, binding) {
-  let decodedToken = decodeToken(getToken());
-  if (Array.isArray(binding.value)) {
+Vue.directive('permission', {
+  inserted(el, binding) {
+    const { arg, value, modifiers } = binding;
+    const modifierKeys = Object.keys(modifiers);
     let permitted = false;
-    if (binding.arg === 'and') {
-      // This is the AND case. If a user has ALL of the specified permissions, permitted will be true
-      permitted = true;
-      binding.value.forEach(function (b) {
-        if (!hasPermission(b, decodedToken)) {
-          permitted = false;
-        }
-      });
-    } else if (binding.arg === 'or') {
-      // This is the OR case. If a user has one or more of the specified permissions, permitted will be true
-      binding.value.forEach(function (b) {
-        if (hasPermission(b, decodedToken)) {
-          permitted = true;
-        }
-      });
-    }
-    if (!permitted) {
-      el.style.display = 'none';
+
+    if (arg === 'complex') {
+      permitted = hasComplexPermission(value);
+    } else {
+      permitted = hasPermission(value, arg);
     }
-  } else {
-    if (!hasPermission(binding.value, decodedToken)) {
+
+    if (permitted) return; // User has permission, do nothing
+
+    if (modifierKeys.length === 0) {
       el.style.display = 'none';
+      return;
     }
-  }
+
+    modifierKeys.forEach((modifier) => {
+      switch (modifier.toLowerCase()) {
+        case 'readonly':
+          el.setAttribute('readonly', true);
+          break;
+        case 'disabled':
+          el.setAttribute('disabled', true);
+          break;
+        case 'hide':
+          el.style.display = 'none';
+          break;
+        case 'visibility':
+          el.style.visibility = 'hidden';
+          break;
+        default:
+          throw new Error(`Unknown modifier v-permission:${modifier}`);
+      }
+    });
+  },
 });

src/mixins/permissionsMixin.js

@@ -1,90 +1,14 @@
-/* eslint-disable prettier/prettier */
-import * as permissions from '../shared/permissions';
+import PERMISSIONS, {
+  hasPermission,
+  hasComplexPermission,
+} from '../shared/permissions';
 
 export default {
   data() {
     return {
-      PERMISSIONS: {
-        BOM_UPLOAD: permissions.BOM_UPLOAD,
-        VIEW_PORTFOLIO: permissions.VIEW_PORTFOLIO,
-        PORTFOLIO_MANAGEMENT: permissions.PORTFOLIO_MANAGEMENT,
-        PORTFOLIO_MANAGEMENT_CREATE: permissions.PORTFOLIO_MANAGEMENT_CREATE,
-        PORTFOLIO_MANAGEMENT_READ: permissions.PORTFOLIO_MANAGEMENT_READ,
-        PORTFOLIO_MANAGEMENT_UPDATE: permissions.PORTFOLIO_MANAGEMENT_UPDATE,
-        PORTFOLIO_MANAGEMENT_DELETE: permissions.PORTFOLIO_MANAGEMENT_DELETE,
-        VIEW_VULNERABILITY: permissions.VIEW_VULNERABILITY,
-        VULNERABILITY_ANALYSIS: permissions.VULNERABILITY_ANALYSIS,
-        VULNERABILITY_ANALYSIS_CREATE:
-          permissions.VULNERABILITY_ANALYSIS_CREATE,
-        VULNERABILITY_ANALYSIS_READ: permissions.VULNERABILITY_ANALYSIS_READ,
-        VULNERABILITY_ANALYSIS_UPDATE:
-          permissions.VULNERABILITY_ANALYSIS_UPDATE,
-        VIEW_POLICY_VIOLATION: permissions.VIEW_POLICY_VIOLATION,
-        VULNERABILITY_MANAGEMENT: permissions.VULNERABILITY_MANAGEMENT,
-        VULNERABILITY_MANAGEMENT_CREATE:
-          permissions.VULNERABILITY_MANAGEMENT_CREATE,
-        VULNERABILITY_MANAGEMENT_READ:
-          permissions.VULNERABILITY_MANAGEMENT_READ,
-        VULNERABILITY_MANAGEMENT_UPDATE:
-          permissions.VULNERABILITY_MANAGEMENT_UPDATE,
-        VULNERABILITY_MANAGEMENT_DELETE:
-          permissions.VULNERABILITY_MANAGEMENT_DELETE,
-        POLICY_VIOLATION_ANALYSIS: permissions.POLICY_VIOLATION_ANALYSIS,
-        ACCESS_MANAGEMENT: permissions.ACCESS_MANAGEMENT,
-        ACCESS_MANAGEMENT_CREATE: permissions.ACCESS_MANAGEMENT_CREATE,
-        ACCESS_MANAGEMENT_READ: permissions.ACCESS_MANAGEMENT_READ,
-        ACCESS_MANAGEMENT_UPDATE: permissions.ACCESS_MANAGEMENT_UPDATE,
-        ACCESS_MANAGEMENT_DELETE: permissions.ACCESS_MANAGEMENT_DELETE,
-        SYSTEM_CONFIGURATION: permissions.SYSTEM_CONFIGURATION,
-        SYSTEM_CONFIGURATION_CREATE: permissions.SYSTEM_CONFIGURATION_CREATE,
-        SYSTEM_CONFIGURATION_READ: permissions.SYSTEM_CONFIGURATION_READ,
-        SYSTEM_CONFIGURATION_UPDATE: permissions.SYSTEM_CONFIGURATION_UPDATE,
-        SYSTEM_CONFIGURATION_DELETE: permissions.SYSTEM_CONFIGURATION_DELETE,
-        PROJECT_CREATION_UPLOAD: permissions.PROJECT_CREATION_UPLOAD,
-        POLICY_MANAGEMENT: permissions.POLICY_MANAGEMENT,
-        POLICY_MANAGEMENT_CREATE: permissions.POLICY_MANAGEMENT_CREATE,
-        POLICY_MANAGEMENT_READ: permissions.POLICY_MANAGEMENT_READ,
-        POLICY_MANAGEMENT_UPDATE: permissions.POLICY_MANAGEMENT_UPDATE,
-        POLICY_MANAGEMENT_DELETE: permissions.POLICY_MANAGEMENT_DELETE,
-        TAG_MANAGEMENT: permissions.TAG_MANAGEMENT,
-        TAG_MANAGEMENT_DELETE: permissions.TAG_MANAGEMENT_DELETE,
-      },
+      PERMISSIONS,
+      hasPermission,
+      hasComplexPermission,
     };
   },
-  computed: {
-    decodedToken() {
-      return permissions.decodeToken(permissions.getToken());
-    },
-  },
-  methods: {
-    isPermitted(permission) {
-      // return permissions.hasPermission(permission, this.decodedToken);
-      if (typeof permission == 'string') {
-        return permissions.hasPermission(permission, this.decodedToken);
-      } else if (Array.isArray(permission)) {
-        for (let perm of permission) {
-          if (permissions.hasPermission(perm, this.decodedToken)) {
-            return true;
-          }
-        }
-        return false;
-      } else {
-        throw new Error('permission must be of type string or array');
-      }
-    },
-    isNotPermitted(permission) {
-      if (typeof permission == 'string') {
-        return !permissions.hasPermission(permission, this.decodedToken);
-      } else if (Array.isArray(permission)) {
-        for (let perm of permission) {
-          if (permissions.hasPermission(perm, this.decodedToken)) {
-            return false;
-          }
-        }
-        return true;
-      } else {
-        throw new Error('permission must be of type string or array');
-      }
-    },
-  },
 };