frontend: Log in users when the app is being reloaded

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 478422f939097da8cdaf28f4bde12d0062a95c8c..c529a52df3a524255bfe27b6e3d06c4aecddf80e 100644 (file)
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,6 +4,17 @@
        // Authentication
        import { useAuthStore } from '@/stores/auth'
        const auth = useAuthStore()
+
+       // Import utils
+       import { deleteAccessToken } from "@/utils/auth";
+
+       function logout() {
+               // Drop all stored authentication data
+               auth.logout();
+
+               // Drop the current access token
+               deleteAccessToken();
+       }
 </script>
 
 <template>
@@ -33,7 +44,7 @@
                                                </a>
 
                                                <div class="navbar-dropdown is-boxed">
-                                                       <a class="navbar-item" href="#" @click.prevent="auth.logout">
+                                                       <a class="navbar-item" href="#" @click.prevent="logout">
                                                                {{ $t("Log Out") }}
                                                        </a>
                                                </div>

diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 2302f5c8334e8b1b404ad5e0ee06f23fdef1506e..3f61ded6236bbda86e12fe34c2ed96f3f2f9628e 100644 (file)
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -37,4 +37,11 @@ app.use(
        })
 )
 
-app.mount('#app')
+// Authentication
+import { useAuthStore } from '@/stores/auth';
+const auth = useAuthStore();
+
+// Fetch authentication credentials and the mount the app
+auth.restore().finally(() => {
+       app.mount("#app")
+});

diff --git a/frontend/src/stores/auth.ts b/frontend/src/stores/auth.ts
index 9eec094692be18e6a301c464342b40059acedcb9..6f5a097321db204ff81658482e06703061ec0d56 100644 (file)
--- a/frontend/src/stores/auth.ts
+++ b/frontend/src/stores/auth.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import type { User } from "@/types/User"
+import { fetchCurrentUser } from "@/utils/auth"
 
 interface AuthState {
        user: User | null;
@@ -22,5 +23,11 @@ export const useAuthStore = defineStore("auth", {
                        this.user = null;
                        this.isLoggedIn = false;
                },
+
+               async restore() {
+                       const user: User = await fetchCurrentUser();
+                       if (user)
+                               this.setUser(user);
+               },
        },
 });

diff --git a/frontend/src/utils/auth.ts b/frontend/src/utils/auth.ts
index ba3291cb398116a6e31549e793ede111423c19a9..9f01302b0a8a3215cc84c05fbf1d50f2a3c24128 100644 (file)
--- a/frontend/src/utils/auth.ts
+++ b/frontend/src/utils/auth.ts
@@ -18,6 +18,10 @@ function setAccessToken(token: string): void {
        localStorage.setItem("token", token)
 }
 
+export function deleteAccessToken(): void {
+       localStorage.removeItem("token")
+}
+
 /*
        Takes username and password and logs in the user
 */