refactor: session handling (#2398)

* refactor session handling

* simplify

src/app/middleware/auth.global.ts

@@ -4,25 +4,27 @@ export default defineNuxtRouteMiddleware(async (to) => {
     return;
   }
 
+  const event = useRequestEvent();
+
   const authStore = useAuthStore();
-  const userData = await authStore.getSession();
+  authStore.userData = await authStore.getSession(event);
 
   // skip login if already logged in
   if (to.path === '/login') {
-    if (userData?.username) {
+    if (authStore.userData?.username) {
       return navigateTo('/', { redirectCode: 302 });
     }
     return;
   }
 
   // Require auth for every page other than Login
-  if (!userData?.username) {
+  if (!authStore.userData?.username) {
     return navigateTo('/login', { redirectCode: 302 });
   }
 
   // Check for admin access
   if (to.path.startsWith('/admin')) {
-    if (!hasPermissions(userData, 'admin', 'any')) {
+    if (!hasPermissions(authStore.userData, 'admin', 'any')) {
       return abortNavigation('Not allowed to access Admin Panel');
     }
   }

src/app/pages/admin.vue

@@ -38,9 +38,6 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-
 const { t } = useI18n();
 
 const route = useRoute();

src/app/pages/clients/[id].vue

@@ -206,9 +206,7 @@
 </template>
 
 <script lang="ts" setup>
-const authStore = useAuthStore();
 const globalStore = useGlobalStore();
-authStore.update();
 
 const route = useRoute();
 const id = route.params.id as string;

src/app/pages/index.vue

@@ -29,9 +29,6 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-
 const globalStore = useGlobalStore();
 const clientsStore = useClientsStore();
 

src/app/pages/login.vue

@@ -67,9 +67,6 @@
 </template>
 
 <script setup lang="ts">
-const authStore = useAuthStore();
-authStore.update();
-
 const toast = useToast();
 const { t } = useI18n();
 

src/app/pages/me.vue

@@ -120,7 +120,6 @@
 import { encodeQR } from 'qr';
 
 const authStore = useAuthStore();
-authStore.update();
 
 const name = ref(authStore.userData?.name);
 const email = ref(authStore.userData?.email);

src/app/stores/auth.ts

@@ -1,18 +1,25 @@
-export const useAuthStore = defineStore('Auth', () => {
-  const { data: userData, refresh: update } = useFetch('/api/session', {
-    method: 'get',
-  });
+import type { H3Event } from 'h3';
+import type { SharedPublicUser } from '~~/shared/utils/permissions';
 
-  async function getSession() {
+export const useAuthStore = defineStore('Auth', () => {
+  const userData = useState<SharedPublicUser | null>('user-data', () => null);
+
+  async function getSession(event?: H3Event) {
+    const fetch = event?.$fetch || $fetch;
     try {
-      const { data } = await useFetch('/api/session', {
+      const data = await fetch('/api/session', {
         method: 'get',
       });
-      return data.value;
+      return data;
     } catch {
       return null;
     }
   }
 
+  async function update() {
+    const data = await getSession();
+    userData.value = data;
+  }
+
   return { userData, update, getSession };
 });