From bc3c15e3bc3b2b244a18883513de46f23db217af Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Wed, 3 Feb 2021 03:46:06 +0100 Subject: [PATCH] Fixed login and login-guard, redirect when offline --- src/boot/axios.ts | 13 ++++++--- src/boot/login.ts | 27 ++++++------------- src/layouts/MainLayout.vue | 4 ++- src/pages/Offline.vue | 4 ++- .../user/components/settings/Session.vue | 1 - src/store/index.ts | 25 ++++++++++++----- 6 files changed, 42 insertions(+), 32 deletions(-) diff --git a/src/boot/axios.ts b/src/boot/axios.ts index c7f23f1..6553f09 100644 --- a/src/boot/axios.ts +++ b/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('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 = 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); diff --git a/src/boot/login.ts b/src/boot/login.ts index da36ef3..61e1d45 100644 --- a/src/boot/login.ts +++ b/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(); } } }); diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index e40126c..0a501e5 100644 --- a/src/layouts/MainLayout.vue +++ b/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('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(); } diff --git a/src/pages/Offline.vue b/src/pages/Offline.vue index 416e95f..3dd139a 100644 --- a/src/pages/Offline.vue +++ b/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: path } : { name: 'login' }); } }, 1000); diff --git a/src/plugins/user/components/settings/Session.vue b/src/plugins/user/components/settings/Session.vue index 0aca634..1e5a424 100644 --- a/src/plugins/user/components/settings/Session.vue +++ b/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( diff --git a/src/store/index.ts b/src/store/index.ts index d63348e..2d95bf5 100644 --- a/src/store/index.ts +++ b/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('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;