✨ Auth guard

pkg/views/src/router/index.ts

@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router"
+import { useUserinfo } from "@/stores/userinfo"
 import MasterLayout from "@/layouts/master.vue"
 
 const router = createRouter({
@@ -7,18 +8,39 @@ const router = createRouter({
     {
       path: "/",
       component: MasterLayout,
-      children: [
-        { path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") },
-      ],
+      children: [{ path: "/", name: "dashboard", component: () => import("@/views/dashboard.vue") }],
     },
     {
       path: "/auth",
       children: [
-        { path: "sign-in", name: "auth.sign-in", component: () => import("@/views/auth/sign-in.vue") },
-        { path: "sign-up", name: "auth.sign-up", component: () => import("@/views/auth/sign-up.vue") },
-      ]
-    }
+        {
+          path: "sign-in",
+          name: "auth.sign-in",
+          component: () => import("@/views/auth/sign-in.vue"),
+          meta: { public: true },
+        },
+        {
+          path: "sign-up",
+          name: "auth.sign-up",
+          component: () => import("@/views/auth/sign-up.vue"),
+          meta: { public: true },
+        },
+      ],
+    },
   ],
 })
 
+router.beforeEach(async (to, from, next) => {
+  const id = useUserinfo()
+  if (!id.isReady) {
+    await id.readProfiles()
+  }
+
+  if (!to.meta.public && !id.userinfo.isLoggedIn) {
+    next({ name: "auth.sign-in", query: { redirect_uri: to.fullPath } })
+  } else {
+    next()
+  }
+})
+
 export default router

pkg/views/src/stores/userinfo.ts

@@ -4,17 +4,15 @@ import { ref } from "vue"
 import { request } from "@/scripts/request"
 
 export interface Userinfo {
-  isReady: boolean
   isLoggedIn: boolean
   displayName: string
   data: any
 }
 
 const defaultUserinfo: Userinfo = {
-  isReady: false,
   isLoggedIn: false,
   displayName: "Citizen",
-  data: null
+  data: null,
 }
 
 export function getAtk(): string {
@@ -31,25 +29,25 @@ export const useUserinfo = defineStore("userinfo", () => {
 
   async function readProfiles() {
     if (!checkLoggedIn()) {
-        isReady.value = true;
-      }
-  
-      const res = await request("/api/users/me", {
-        headers: { "Authorization": `Bearer ${getAtk()}` }
-      });
-  
-      if (res.status !== 200) {
-        return;
-      }
-  
-      const data = await res.json();
-  
-      userinfo.value = {
-        isReady: true,
-        isLoggedIn: true,
-        displayName: data["nick"],
-        data: data
-      };
+      isReady.value = true
+    }
+
+    const res = await request("/api/users/me", {
+      headers: { Authorization: `Bearer ${getAtk()}` },
+    })
+
+    if (res.status !== 200) {
+      return
+    }
+
+    const data = await res.json()
+
+    isReady.value = true
+    userinfo.value = {
+      isLoggedIn: true,
+      displayName: data["nick"],
+      data: data,
+    }
   }
 
   return { userinfo, isReady, readProfiles }