src/boot/login.ts

@@ -7,7 +7,17 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
   router.beforeEach((to, from, next) => {
     const session = store.state.session.currentSession;
 
-    if (to.name != 'login') {
+    if (to.path.startsWith('/main')) {
+      // Secured area (LOGIN REQUIRED)
+      // Check login is ok
+      if (!session || session.expires <= new Date()) {
+        store.dispatch('session/logout').catch(error => {
+          console.warn(error);
+        });
+        return;
+      }
+
+      // Check if special permissions are required
       if (
         to.matched.every((record: RouteRecord) => {
           if (!('meta' in record) || !('permissions' in record.meta))
@@ -23,30 +33,20 @@ export default boot<Store<StateInterface>>(({ router, store }) => {
           }
         })
       ) {
-        if (
-          !to.matched.every((record: RouteRecord) => {
-            if (!('meta' in record) || !('permissions' in record.meta))
-              return true;
-            else return false;
-          })
-        ) {
-          if (!session || session.expires <= new Date()) {
-            store.dispatch('session/logout').catch(error => {
-              console.warn(error);
-            });
-            return;
-          }
-        }
         next();
       } else {
         next({ name: 'login', query: { redirect: to.fullPath } });
       }
     } else {
-      if (store.state.user.currentUser && !to.params['logout']) {
+      if (
+        to.name == 'login' &&
+        store.state.user.currentUser &&
+        !to.params['logout']
+      ) {
         // Called login while already logged in
         void next({ name: 'dashboard' });
       } else {
-        // Not logged in or from logout
+        // We are on the non secured area
         next();
       }
     }

src/config.ts

@@ -1,5 +1,5 @@
 const config = {
-  baseURL: 'https://flaschengeist.duckdns.org/api'
+  baseURL: '/api'
 };
 
 export default config;

src/plugins/user/components/settings/RoleSettings.vue

@@ -1,16 +1,17 @@
 <template>
   <div>
     <q-card class="col-12">
-      <q-form @submit="save" @reset="reset">
+      <q-form
+        @submit="save"
+        @reset="reset"
+      >
         <q-linear-progress
           indeterminate
           rounded
           color="primary"
           v-if="loading"
         />
-        <q-card-section
+        <q-card-section class="fit row justify-start content-center items-center">
-          class="fit row justify-start content-center items-center"
-        >
           <span class="col-xs-12 col-sm-6 text-center text-h6">
             Rollen und Berechtigungen
           </span>
@@ -46,10 +47,24 @@
             />
           </q-scroll-area>
         </q-card-section>
-        <q-card-actions v-if="role" align="right">
+        <q-card-actions
-          <q-btn label="Löschen" color="negative" @click="remove" />
+          v-if="role"
-          <q-btn label="Reset" type="reset" />
+          align="right"
-          <q-btn color="primary" type="submit" label="Speichern" />
+        >
+          <q-btn
+            label="Löschen"
+            color="negative"
+            @click="remove"
+          />
+          <q-btn
+            label="Reset"
+            type="reset"
+          />
+          <q-btn
+            color="primary"
+            type="submit"
+            label="Speichern"
+          />
         </q-card-actions>
       </q-form>
     </q-card>
@@ -61,7 +76,7 @@ import {
   computed,
   defineComponent,
   ref,
-  onBeforeMount
+  onBeforeMount,
 } from '@vue/composition-api';
 import { Store } from 'vuex';
 import { StateInterface } from 'src/store';
@@ -72,10 +87,10 @@ export default defineComponent({
     const store = <Store<StateInterface>>root.$store;
 
     onBeforeMount(() => {
-      store.dispatch('user/getRoles').catch(error => {
+      store.dispatch('user/getRoles').catch((error) => {
         console.warn(error);
       });
-      store.dispatch('user/getPermissions').catch(error => {
+      store.dispatch('user/getPermissions').catch((error) => {
         console.warn(error);
       });
     });
@@ -84,10 +99,10 @@ export default defineComponent({
     const role = ref<FG.Role | null>(null);
     const roles = computed(() => store.state.user.roles);
     const permissions = computed(() =>
-      store.state.user.permissions.map(perm => {
+      store.state.user.permissions.map((perm) => {
         return {
           value: perm,
-          label: perm
+          label: perm,
         };
       })
     );
@@ -110,12 +125,12 @@ export default defineComponent({
       }
     }
 
-    function updateRole(rl: FG.Role | string) {
+    function updateRole(rl: FG.Role | string | null) {
-      if (typeof rl === 'string') return;
+      if (typeof rl === 'string' || rl === null) return;
       role.value = {
         id: rl.id,
         name: rl.name,
-        permissions: Array.from(rl.permissions)
+        permissions: Array.from(rl.permissions),
       };
     }
 
@@ -130,7 +145,7 @@ export default defineComponent({
     function reset() {
       if (role.value && role.value.id !== -1) {
         const original = roles.value.find(
-          value => value.name === role.value?.name
+          (value) => value.name === role.value?.name
         );
         if (original) updateRole(original);
       } else {
@@ -146,7 +161,7 @@ export default defineComponent({
           store
             .dispatch('user/deleteRole', role.value)
             .then(() => (role.value = null))
-            .catch(error => console.warn(error));
+            .catch((error) => console.warn(error));
         }
       }
     }
@@ -162,8 +177,8 @@ export default defineComponent({
       reset,
       removeRole,
       remove,
-      loading
+      loading,
     };
-  }
+  },
 });
 </script>