Fixed login and login-guard, redirect when offline

src/boot/axios.ts

@@ -6,7 +6,7 @@ import { useMainStore } from 'src/store';
 
 const api = axios.create();
 
-export default boot(({ store, router }) => {
+export default boot(({ router }) => {
   api.defaults.baseURL = LocalStorage.getItem<string>('baseURL') || config.baseURL;
 
   /***
@@ -28,6 +28,8 @@ export default boot(({ store, router }) => {
   api.interceptors.response.use(
     (response) => response,
     (error) => {
+      const store = useMainStore();
+
       if (error) {
         const e = <AxiosError>error;
         if (
@@ -43,8 +45,13 @@ export default boot(({ store, router }) => {
             query: { redirect: next },
           });
         } else if (e.response && e.response.status == 401) {
-          if (router.currentRoute.value.name !== 'login')
-            return store.dispatch('session/clearCurrent');
+          if (router.currentRoute.value.name !== 'login') {
+            store.logout();
+            return router.push({
+              name: 'login',
+              query: { logout: '.', redirect: router.currentRoute.value.fullPath },
+            });
+          }
         }
       }
       return Promise.reject(error);

src/boot/login.ts

@@ -4,21 +4,17 @@ import { hasPermissions } from 'src/utils/permission';
 import { RouteRecord } from 'vue-router';
 
 export default boot(({ router }) => {
-  router.beforeEach((to, from, next) => {
-    console.log(`from ${from.fullPath} to ${to.fullPath}`);
+  router.beforeResolve((to, from, next) => {
     const store = useMainStore();
 
-    if (to.path == from.path) {
-      return;
-    }
+    if (to.path == from.path) return next();
 
     if (to.path.startsWith('/main')) {
       // Secured area (LOGIN REQUIRED)
       // Check login is ok
       if (!store.session || store.session.expires <= new Date()) {
-        console.log('Nope, logout');
         void store.logout();
-        return;
+        return next({ name: 'login', query: { redirect: to.fullPath } });
       }
 
       // Check if special permissions are required
@@ -26,28 +22,21 @@ export default boot(({ router }) => {
         to.matched.every((record: RouteRecord) => {
           if (!('meta' in record) || !('permissions' in record.meta)) return true;
           if ((<{ permissions: FG.Permission[] }>record.meta).permissions) {
-            console.log(record.meta);
-            const h = hasPermissions((<{ permissions: FG.Permission[] }>record.meta).permissions);
-            console.log(h);
-            return h;
+            return hasPermissions((<{ permissions: FG.Permission[] }>record.meta).permissions);
           }
         })
       ) {
-        console.log('ok next');
-        next();
+        return next();
       } else {
-        console.log('Back loggin');
-        next({ name: 'login', query: { redirect: to.fullPath } });
+        return next({ name: 'login', query: { redirect: to.fullPath } });
       }
     } else {
       if (to.name == 'login' && store.user && !to.params['logout']) {
         // Called login while already logged in
-        console.log('Ok next');
-        void next({ name: 'dashboard' });
+        return next({ name: 'dashboard' });
       } else {
         // We are on the non secured area
-        console.log('Ok non sec');
-        next();
+        return next();
       }
     }
   });

src/layouts/MainLayout.vue

@@ -105,7 +105,7 @@ import { Screen } from 'quasar';
 import { defineComponent, ref, inject, computed } from 'vue';
 import { useMainStore } from 'src/store';
 import { FG_Plugin } from 'src/plugins';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const links = [
   {
@@ -136,6 +136,7 @@ export default defineComponent({
   components: { EssentialLink, ShortCutLink },
   setup() {
     const route = useRoute();
+    const router = useRouter();
     const mainStore = useMainStore();
     const flaschengeist = inject<FG_Plugin.Flaschengeist>('flaschengeist');
     const leftDrawer = ref(false);
@@ -171,6 +172,7 @@ export default defineComponent({
     });
 
     function logout() {
+      void router.push({ name: 'login', params: { logout: 'logout' } });
       void mainStore.logout();
     }
 

src/pages/Offline.vue

@@ -45,8 +45,10 @@ export default defineComponent({
     const reload = ref(10);
     const ival = setInterval(() => {
       reload.value -= 1;
-      if (reload.value === 0) {
+      if (reload.value <= 0) {
         const path = router.currentRoute.value.query.redirect;
+        console.log('Offline: ');
+        console.log(path);
         void router.replace(path ? { path: <string>path } : { name: 'login' });
       }
     }, 1000);

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

@@ -141,7 +141,6 @@ export default defineComponent({
     }
 
     async function save() {
-      console.log(lifetime.value);
       isEdit.value = false;
       await sessionStore.updateSession(lifetime.value, props.modelValue.token);
       emit(

src/store/index.ts

@@ -20,7 +20,7 @@ export default store(function (/* { ssrContext } */) {
 import { defineStore } from 'pinia';
 import { api } from 'src/boot/axios';
 import { AxiosResponse } from 'axios';
-import { LocalStorage } from 'quasar';
+import { LocalStorage, SessionStorage } from 'quasar';
 import { useUserStore, useSessionStore } from 'src/plugins/user/store';
 
 function loadCurrentSession() {
@@ -29,12 +29,18 @@ function loadCurrentSession() {
   return session || undefined;
 }
 
+function loadUser() {
+  const user = SessionStorage.getItem<FG.User>('user');
+  if (user && user.birthday) user.birthday = new Date(user.birthday);
+  return user || undefined;
+}
+
 export const useMainStore = defineStore({
   id: 'main',
 
   state: () => ({
     session: loadCurrentSession(),
-    user: undefined as FG.User | undefined,
+    user: loadUser(),
   }),
 
   getters: {
@@ -62,7 +68,10 @@ export const useMainStore = defineStore({
           this.session = this.session;
           const userStore = useUserStore();
           const user = await userStore.getUser(this.session.userid);
-          if (user) this.user = user;
+          if (user) {
+            this.user = user;
+            SessionStorage.set('user', user);
+          }
         }
       }
     },
@@ -82,10 +91,12 @@ export const useMainStore = defineStore({
     logout() {
       if (!this.session) return false;
 
-      void api.delete(`/auth/${this.session.token}`);
-      this.$patch({
-        session: undefined,
-        user: undefined,
+      void api.delete(`/auth/${this.session.token}`).finally(() => {
+        this.$patch({
+          session: undefined,
+          user: undefined,
+        });
+        SessionStorage.clear();
       });
       LocalStorage.remove('session');
       return true;