display all navbar items even if no access, including local dev

Author: vkarpov15

frontend/src/index.js

@@ -6,6 +6,7 @@ if (typeof process === 'undefined') {
 
 const api = require('./api');
 const mothership = require('./mothership');
+const { routes } = require('./routes');
 const vanillatoasts = require('vanillatoasts');
 
 const app = Vue.createApp({
@@ -67,7 +68,7 @@ app.component('app-component', {
     window.state = this;
 
     if (mothership.hasAPIKey) {
-      const hash = window.location.hash.replace(/^#?\/?\??/, '') || '';
+      const hash = window.location.hash.replace(/^#?\/?/, '') || '';
       const hashQuery = hash.split('?')[1] || '';
       const hashParams = new URLSearchParams(hashQuery);
       if (hashParams.has('code')) {
@@ -110,6 +111,7 @@ app.component('app-component', {
       const { nodeEnv } = await api.status();
       this.nodeEnv = nodeEnv;
     }
+
     this.status = 'loaded';
   },
   setup() {
@@ -126,7 +128,6 @@ app.component('app-component', {
   }
 });
 
-const { routes } = require('./routes');
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes: routes.map(route => ({
@@ -136,6 +137,14 @@ const router = VueRouter.createRouter({
   }))
 });
 
+router.beforeEach((to, from, next) => {
+  if (to.name === 'root' && window.state.roles && window.state.roles[0] === 'dashboards') {
+    return next('dashboards');
+  } else {
+    next();
+  }
+});
+
 app.use(router);
 
 app.mount('#content');

frontend/src/navbar/navbar.js

@@ -15,14 +15,6 @@ module.exports = app => app.component('navbar', {
   inject: ['state'],
   data: () => ({ showFlyout: false }),
   mounted: function() {
-    // Redirect to first allowed route if current route is not allowed
-    if (!this.hasAccess(this.roles, this.$route.name)) {
-      const firstAllowedRoute = this.allowedRoutes[0];
-      if (firstAllowedRoute) {
-        this.$router.push({ name: firstAllowedRoute.name });
-      }
-    }
-
     const mobileMenuMask = document.querySelector('#mobile-menu-mask');
     const mobileMenu = document.querySelector('#mobile-menu');
 
@@ -61,11 +53,8 @@ module.exports = app => app.component('navbar', {
     canViewTeam() {
       return this.hasAccess(this.roles, 'team');
     },
-    allowedRoutes() {
-      return routes.filter(route => this.hasAccess(this.roles, route.name));
-    },
     defaultRoute() {
-      return this.allowedRoutes[0]?.name || 'dashboards';
+      return this.roles && this.roles[0] === 'dashboards' ? 'dashboards' : 'root';
     }
   },
   methods: {

frontend/src/routes.js

@@ -9,10 +9,12 @@ const roleAccess = {
   dashboards: ['dashboards', 'dashboard']
 };
 
+const allowedRoutesForLocalDev = ['document', 'root'];
+
 // Helper function to check if a role has access to a route
 function hasAccess(roles, routeName) {
   // change to true for local development
-  if (!roles) return false;
+  if (!roles) return allowedRoutesForLocalDev.includes(routeName);
   return roles.some(role => roleAccess[role]?.includes(routeName));
 }