Merge branch 'improve-route-gating' into 'main'

chore: improve frontend route gating

See merge request flattrack/flattrack!403

web/src/common/common.js

@@ -40,6 +40,17 @@ function SetAuthToken (token) {
   return localStorage.setItem('authToken', token)
 }
 
+// HasAuthToken
+// returns whether an auth token is found
+function HasAuthToken () {
+  const authToken = GetAuthToken()
+  return !(
+    typeof authToken === 'undefined' ||
+    authToken === null ||
+    authToken === ''
+  )
+}
+
 // DeleteAuthToken
 // removes the JWT from localStorage
 function DeleteAuthToken () {
@@ -203,6 +214,7 @@ function CopyHrefToClipboard () {
 export default {
   GetAuthToken,
   SetAuthToken,
+  HasAuthToken,
   DeleteAuthToken,
   DisplaySuccessToast,
   DisplayFailureToast,

web/src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import routes from './routes'
 import routerCommon from './common'
+import common from '../common/common'
 
 Vue.use(VueRouter)
 
@@ -18,20 +19,19 @@ const router = new VueRouter({
   }
 })
 
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
   if (typeof to.name !== 'undefined') {
     document.title = `${to.name} | FlatTrack`
   }
-  if (to.matched.some(route => route.meta.requiresAuth === true)) {
+  if (to.meta.requiresAuth === true && common.HasAuthToken() === false) {
     routerCommon.requireAuthToken(to, from, next)
-  }
-  if (to.matched.some(route => route.meta.requiresNoAuth === true)) {
+  } else if (to.meta.requiresNoAuth === true) {
     routerCommon.requireNoAuthToken(to, from, next)
-  }
-  if (to.matched.some(route => route.meta.requiresGroup)) {
+  } else if (typeof to.requiresGroup !== 'undefined') {
     routerCommon.requireGroup(to, from, next)
+  } else {
+    next()
   }
-  next()
 })
 
 export default router

web/src/views/authenticated/shopping-list-view.vue

@@ -1229,18 +1229,18 @@ export default {
         this.templateListName = resp.data.spec.name
       })
     },
-    isNewItemModalActive() {
+    isNewItemModalActive () {
       if (this.isNewItemModalActive !== false) {
         return
       }
       this.GetShoppingListItems()
     },
-    isEditItemModalActive() {
+    isEditItemModalActive () {
       if (this.isEditItemModalActive !== false) {
         return
       }
       this.GetShoppingListItems()
-    },
+    }
   },
   async beforeMount () {
     this.GetShoppingList()