feat: implement auth guard on route change

src/components.d.ts

@@ -29,6 +29,8 @@ declare module 'vue' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
     NDynamicTags: typeof import('naive-ui')['NDynamicTags']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']

src/main.ts

@@ -36,6 +36,12 @@ router.beforeEach((to, from, next) => {
     title = `${to.meta.title} - ${title}`
 
   document.title = title
+
+  const isAuthenticated = useAccountStore().isAuthenticated()
+  const isAuthRequired = to.meta.authRequired ?? true
+  if (isAuthRequired && !isAuthenticated)
+    next({ path: '/account/login' })
+
   next()
 })
 enableMocking().then(() => app.mount('#app'))

src/pages/Account/login.vue

@@ -51,6 +51,7 @@ const rules: FormRules = {
 meta:
   title: Login
   layout: auth
+  authRequired: false
 </route>
 
 <template>

src/store/account.store.ts

@@ -6,6 +6,7 @@ export const useAccountStore = defineStore('account', () => {
   const user = ref<Account | null>(null)
   const isLoading = ref(false)
   const loginFailed = ref(false)
+
   async function login(loginInfo: LoginViewModel): Promise<boolean> {
     isLoading.value = true
     try {
@@ -32,11 +33,16 @@ export const useAccountStore = defineStore('account', () => {
     user.value = null
   }
 
+  function isAuthenticated() {
+    return (user.value?.token && user.value.token !== null) ?? false
+  }
+
   return {
     isLoading,
     loginFailed,
     login,
     logout,
+    isAuthenticated,
   }
 })