Implemented: permission management and access restrictions (#244)

.env.example

@@ -3,7 +3,7 @@ VUE_APP_I18N_FALLBACK_LOCALE=en
 VUE_APP_CACHE_MAX_AGE=3600
 VUE_APP_VIEW_SIZE=10
 VUE_APP_DATE_FORMAT=MM/dd/yyyy
-VUE_APP_PERMISSION_ID=
+VUE_APP_PERMISSION_ID="IMPORT_APP_VIEW"
 VUE_APP_ALIAS={}
 VUE_APP_MAPPING_TYPES={"PO": "PO_MAPPING_PREF","RSTINV": "INV_MAPPING_PREF"}
 VUE_APP_MAPPING_PO={"orderId": { "label": "Order ID", "required": true }, "productSku": { "label": "Shopify product SKU", "required": true },"orderDate": { "label": "Arrival date", "required": true }, "quantity": { "label": "Ordered quantity", "required": true }, "facility": { "label": "Facility ID", "required": true }}

package.json

@@ -14,13 +14,15 @@
   "dependencies": {
     "@capacitor/android": "^2.4.7",
     "@capacitor/core": "^2.4.7",
+    "@casl/ability": "^6.0.0",
     "@hotwax/app-version-info": "^1.0.0",
     "@hotwax/apps-theme": "^1.1.0",
     "@hotwax/dxp-components": "^1.11.0",
     "@hotwax/oms-api": "^1.10.0",
     "@ionic/core": "6.7.5",
     "@ionic/vue": "6.7.5",
     "@ionic/vue-router": "6.7.5",
+    "boon-js": "^2.0.3",
     "@types/file-saver": "^2.0.4",
     "@types/papaparse": "^5.3.1",
     "core-js": "^3.6.5",

src/adapter/index.ts

@@ -2,6 +2,7 @@ import {
   api,
   client,
   getConfig,
+  hasError,
   fetchProducts,
   initialise,
   logout,
@@ -16,6 +17,7 @@ export {
   api,
   client,
   getConfig,
+  hasError,
   fetchProducts,
   initialise,
   logout,

src/authorization/Actions.ts

@@ -0,0 +1,2 @@
+export default {
+}

src/authorization/Rules.ts

@@ -0,0 +1,4 @@
+export default {
+  "APP_INVENTORY_VIEW": "MDM_IMP_INVENTORY_VIEW", 
+  "IMPORT_APP_VIEW": "IMPORT_APP_VIEW"
+} as any 

src/authorization/index.ts

@@ -0,0 +1,124 @@
+import { AbilityBuilder, PureAbility } from '@casl/ability';
+import { getEvaluator, parse } from 'boon-js';
+import { Tokens } from 'boon-js/lib/types'
+
+// TODO Improve this
+// We will move this code to an external plugin and use below Actions and Rules accordlingly
+let Actions = {} as any;
+let Rules = {} as any;
+
+// We are using CASL library to define permissions.
+// Instead of using Action-Subject based authorisation we are going with Claim based Authorization.
+// We would be defining the permissions for each action and case, map with server permissiosn based upon certain rules.
+// https://casl.js.org/v5/en/cookbook/claim-authorization
+// Following the comment of Sergii Stotskyi, author of CASL
+// https://github.com/stalniy/casl/issues/525
+// We are defining a PureAbility and creating an instance with AbilityBuilder.
+type ClaimBasedAbility = PureAbility<string>;
+const { build } = new AbilityBuilder<ClaimBasedAbility>(PureAbility);
+const ability = build();
+
+/**
+ * The method returns list of permissions required for the rules. We are having set of rules, 
+ * through which app permissions are defined based upon the server permissions.
+ * When getting server permissions, as all the permissions are not be required. 
+ * Specific permissions used defining the rules are extracted and sent to server. 
+ * @returns permissions
+ */
+const getServerPermissionsFromRules = () => {
+    // Iterate for each rule
+    const permissions = Object.keys(Rules).reduce((permissions: any, rule: any) => {
+        const permissionRule = Rules[rule];
+        // some rules may be empty, no permission is required from server
+        if (permissionRule) {
+            // Each rule may have multiple permissions along with operators
+            // Boon js parse rules into tokens, each token may be operator or server permission
+            // permissionId will have token name as identifier. 
+            const permissionTokens = parse(permissionRule);
+            permissions = permissionTokens.reduce((permissions: any, permissionToken: any) => {
+                // Token object with name as identifier has permissionId 
+                if (Tokens.IDENTIFIER === permissionToken.name) {
+                    permissions.add(permissionToken.value);
+                }
+                return permissions;
+            }, permissions)
+        }
+        return permissions;
+    }, new Set())
+    return [...permissions];
+}
+
+/**
+ * The method is used to prepare app permissions from the server permissions.
+ * Rules could be defined such that each app permission could be defined based upon certain one or more server permissions.
+ * @param serverPermissions 
+ * @returns appPermissions
+ */
+const prepareAppPermissions = (serverPermissions: any) => {
+    const serverPermissionsInput = serverPermissions.reduce((serverPermissionsInput: any, permission: any) => {
+        serverPermissionsInput[permission] = true;
+        return serverPermissionsInput;
+    }, {})
+    // Boonjs evaluator needs server permissions as object with permissionId and boolean value
+    // Each rule is passed to evaluator along with the server permissions
+    // if the server permissions and rule matches, app permission is added to list
+    const permissions = Object.keys(Rules).reduce((permissions: any, rule: any) => {
+        const permissionRule = Rules[rule];
+        // If for any app permission, we have empty rule we user is assigned the permission
+        // If rule is not defined, the app permisions is still evaluated or provided to all the users.
+        if (!permissionRule || (permissionRule && getEvaluator(permissionRule)(serverPermissionsInput))) {
+            permissions.push(rule);
+        }
+        return permissions;
+    }, [])
+    const { can, rules } = new AbilityBuilder<ClaimBasedAbility>(PureAbility);
+    permissions.map((permission: any) => {
+        can(permission);
+    })
+    return rules;
+}
+
+/**
+ * 
+ * Sets the current app permissions. This should be used after perparing the app permissions from the server permissions
+ * @param permissions 
+ * @returns 
+ */
+const setPermissions = (permissions: any) => {
+    // If the user has passed undefined or null, it should not break the code
+    if (!permissions) permissions = [];
+    ability.update(permissions)
+    return true;
+};
+
+/**
+ * Resets the permissions list. Used for cases like logout 
+ */
+const resetPermissions = () => setPermissions([]);
+
+/**
+ * 
+ * @param permission 
+ * @returns 
+ */
+const hasPermission = (permission: string) => ability.can(permission);
+
+export { Actions, getServerPermissionsFromRules, hasPermission, prepareAppPermissions, resetPermissions, setPermissions};
+
+// TODO Move this code to an external plugin, to be used across the apps
+export default {
+    install(app: any, options: any) {
+
+        // Rules and Actions could be app and OMS package specific
+        Rules = options.rules;
+        Actions = options.actions;
+
+        // TODO Check why global properties is not working and apply across.
+        app.config.globalProperties.$permission = this;
+    },
+    getServerPermissionsFromRules, 
+    hasPermission, 
+    prepareAppPermissions, 
+    resetPermissions, 
+    setPermissions
+}

src/locales/en.json

@@ -170,5 +170,6 @@
   "Username": "Username",
   "View all date time formats supported by the HotWax Import app.": "View all date time formats supported by the HotWax Import app.",
   "View": "View",
-  "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu."
+  "Would you like to update your time zone to . Your profile is currently set to . This setting can always be changed from the settings menu.": "Would you like to update your time zone to {localTimeZone}. Your profile is currently set to {profileTimeZone}. This setting can always be changed from the settings menu.",
+  "You do not have permission to access this page": "You do not have permission to access this page"
 }

src/main.ts

@@ -28,7 +28,9 @@ import '@hotwax/apps-theme';
 import i18n from './i18n'
 import store from './store'
 import { DateTime } from 'luxon';
-
+import permissionPlugin from '@/authorization';
+import permissionRules from '@/authorization/Rules';
+import permissionActions from '@/authorization/Actions';
 import logger from './logger';
 import { dxpComponents } from '@hotwax/dxp-components'
 import { login, logout, loader } from './user-utils';
@@ -44,6 +46,10 @@ const app = createApp(App)
   .use(router)
   .use(i18n)
   .use(store)
+  .use(permissionPlugin, {
+    rules: permissionRules,
+    actions: permissionActions
+  })
   .use(dxpComponents, {
     defaultImgUrl: require("@/assets/images/defaultImage.png"),
     login,

src/router/index.ts

@@ -8,8 +8,17 @@ import SavedMappings from '@/views/SavedMappings.vue'
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
 import MappingDetail from '@/views/MappingDetail.vue'
-import { DxpLogin, useAuthStore } from '@hotwax/dxp-components';
+import { DxpLogin, translate, useAuthStore } from '@hotwax/dxp-components';
 import { loader } from '@/user-utils';
+import { showToast } from '@/utils';
+import { hasPermission } from '@/authorization';
+
+// Defining types for the meta values
+declare module 'vue-router' {
+  interface RouteMeta {
+    permissionId?: string;
+  }
+}
 
 const authGuard = async (to: any, from: any, next: any) => {
   const authStore = useAuthStore()
@@ -52,7 +61,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/inventory',
     name: 'Inventory',
     component: Inventory,
-    beforeEnter: authGuard
+    beforeEnter: authGuard,
+    meta: {
+      permissionId: "APP_INVENTORY_VIEW"
+    }
   },
   {
     path: '/inventory-review',
@@ -91,4 +103,19 @@ const router = createRouter({
   routes
 })
 
+router.beforeEach((to, from) => {
+  if (to.meta.permissionId && !hasPermission(to.meta.permissionId)) {
+    let redirectToPath = from.path;
+    // If the user has navigated from Login page or if it is page load, redirect user to settings page without showing any toast
+    if (redirectToPath == "/login" || redirectToPath == "/") redirectToPath = "/settings";
+    else {
+      showToast(translate('You do not have permission to access this page'));
+    }
+    return {
+      path: redirectToPath,
+    }
+  }
+})
+
+
 export default router