Centralize authentication state in Pinia

Author: magdielcardoso

web/src/main.ts

@@ -1,5 +1,5 @@
-import { createApp } from 'vue'; import { createPinia } from 'pinia'; import { createRouter,createWebHistory } from 'vue-router'; import App from './App.vue'; import './tailwind.css'; import './style.css';
+import { createApp } from 'vue'; import { createPinia } from 'pinia'; import { createRouter,createWebHistory } from 'vue-router'; import App from './App.vue'; import {useAuthStore} from './stores/auth'; import './tailwind.css'; import './style.css';
 const router=createRouter({history:createWebHistory(),routes:[{path:'/',component:()=>import('./views/Dashboard.vue'),meta:{auth:true}},{path:'/login',component:()=>import('./views/Login.vue')},{path:'/setup',component:()=>import('./views/Setup.vue')},{path:'/projects',component:()=>import('./views/Projects.vue'),meta:{auth:true}},{path:'/projects/:id',component:()=>import('./views/ProjectDetail.vue'),meta:{auth:true}},{path:'/infrastructure',component:()=>import('./views/Infrastructure.vue'),meta:{auth:true}},{path:'/settings',component:()=>import('./views/Settings.vue'),meta:{auth:true}} ]});
 router.addRoute({path:'/activity',component:()=>import('./views/Activity.vue'),meta:{auth:true}});
-router.beforeEach(async(to)=>{if(to.path==='/setup'||to.path==='/login')return true;const setup=await fetch('/api/v1/setup/status').then(r=>r.json()).catch(()=>({needs_setup:false}));if(setup.needs_setup)return '/setup';if(!(await fetch('/api/v1/me')).ok)return `/login?redirect=${encodeURIComponent(to.fullPath)}`;return true});
-createApp(App).use(createPinia()).use(router).mount('#app');
+const pinia=createPinia();const auth=useAuthStore(pinia);router.beforeEach(async(to)=>{if(to.path==='/setup'||to.path==='/login')return true;const setup=await fetch('/api/v1/setup/status').then(r=>r.json()).catch(()=>({needs_setup:false}));if(setup.needs_setup)return '/setup';if(!(await auth.load()))return `/login?redirect=${encodeURIComponent(to.fullPath)}`;return true});
+createApp(App).use(pinia).use(router).mount('#app');

web/src/stores/auth.ts

@@ -0,0 +1,9 @@
+import { defineStore } from 'pinia';
+
+export const useAuthStore = defineStore('auth', {
+  state: () => ({ user: null as null | { id: number; name: string; email: string; role: string }, loaded: false }),
+  actions: {
+    async load() { const response = await fetch('/api/v1/me'); this.user = response.ok ? await response.json() : null; this.loaded = true; return this.user; },
+    clear() { this.user = null; this.loaded = true; }
+  }
+});

web/src/views/Settings.vue

@@ -1,2 +1,2 @@
-<script setup lang="ts">import {onMounted,ref} from 'vue';import {useRouter} from 'vue-router';const router=useRouter();const me=ref<any>({});onMounted(async()=>me.value=await (await fetch('/api/v1/me')).json());const logout=async()=>{await fetch('/api/v1/auth/logout',{method:'POST'});router.push('/login')}</script>
-<template><div class="hero"><div><p class="kicker">ACCOUNT</p><h1>Settings</h1><p class="muted">Manage this local StackHost administrator.</p></div></div><div class="status"><div><strong>{{me.name}}</strong><p>{{me.email}} · {{me.role}}</p></div></div><button class="secondary" @click="logout">Sign out</button></template>
+<script setup lang="ts">import {useRouter} from 'vue-router';import {useAuthStore} from '../stores/auth';const router=useRouter(),auth=useAuthStore();const logout=async()=>{await fetch('/api/v1/auth/logout',{method:'POST'});auth.clear();router.push('/login')}</script>
+<template><div class="hero"><div><p class="kicker">ACCOUNT</p><h1>Settings</h1><p class="muted">Manage this local StackHost administrator.</p></div></div><div class="status"><div><strong>{{auth.user?.name}}</strong><p>{{auth.user?.email}} · {{auth.user?.role}}</p></div></div><button class="secondary" @click="logout">Sign out</button></template>