Frontend security

Author: datajohnson

src/web/src/modules/administration/router/index.ts

@@ -9,21 +9,25 @@ const routes = [
         path: "/administration",
         component: () => import("../views/Administration.vue"),
         beforeEnter: authGuard,
+        meta: { requiresAuth: true, requireSystemAdmin: true },
       },
       {
         path: "/administration/users",
         component: () => import("../views/UserList.vue"),
         beforeEnter: authGuard,
+        meta: { requiresAuth: true, requireSystemAdmin: true },
       },
       {
         path: "/administration/visitor-centres",
         component: () => import("../views/CentreList.vue"),
         beforeEnter: authGuard,
+        meta: { requiresAuth: true, requireSystemAdmin: true },
       },
       {
         path: "/administration/kiosks",
         component: () => import("../views/KioskData.vue"),
         beforeEnter: authGuard,
+        meta: { requiresAuth: true, requireSystemAdmin: true },
       },
     ],
   },

src/web/src/routes.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import { authGuard } from "@auth0/auth0-vue";
 import homeRoutes from "@/modules/home/router";
 import adminstrationRoutes from "@/modules/administration/router";
 import authenticationRoutes from "@/modules/authentication/router";
@@ -23,7 +24,43 @@ const routes: Array<RouteRecordRaw> = [
   },
 ];
 
+import { useUserStore } from "@/store/UserStore";
+
+export async function waitForUserToLoad(): Promise<any> {
+  let u = useUserStore();
+  await u.initialize();
+  return u;
+}
+
 export const router = createRouter({
   history: createWebHistory(),
   routes,
 });
+
+router.beforeEach(async (to) => {
+  console.log("BEFORE", to.meta.requiresAuth, to.meta.requireSystemAdmin);
+
+  if (to.meta.requiresAuth === false) {
+    console.log("route allowed - no auth required");
+    return true;
+  }
+
+  console.log("Await authGuard");
+  const isAuthenticated = await authGuard(to);
+
+  if (isAuthenticated) {
+    console.log("You are authenticated");
+
+    if (to.meta.requireSystemAdmin) {
+      const u = await waitForUserToLoad();
+      console.log("User Is Admin", u.isAdmin);
+      return u.isAdmin;
+    }
+
+    console.log(" route allowed");
+    return true;
+  }
+
+  console.log("You are NOT authenticated - route blocked");
+  return false;
+});

src/web/src/store/UserStore.ts

@@ -1,13 +1,8 @@
 import { defineStore } from "pinia";
-import { useNotificationStore } from "@/store/NotificationStore";
 import { useApiStore } from "@/store/ApiStore";
 import { PERMISSION_URL, PROFILE_URL } from "@/urls";
-import { useCentreStore } from "@/modules/centre/store";
 import { UserScope } from "./models";
 
-let m = useNotificationStore();
-let c = useCentreStore();
-
 export const useUserStore = defineStore("user", {
   state: () => ({
     user: {