login and auth

web/src/components/Layout.vue

@@ -1,5 +1,10 @@
+<script setup lang="ts">
+import Logout from "@/components/Logout.vue";
+import NavBar from "@/components/NavBar.vue";
+</script>
+
 <template>
-  <n-layout v-if="authService.isLoggedIn()">
+  <n-layout>
     <n-layout-header class="flex items-center">
       <h1 class="layout-header-title">T.COM</h1>
       <nav-bar />
@@ -9,15 +14,8 @@
       <router-view />
     </n-layout-content>
   </n-layout>
-  <router-view v-else />
 </template>
 
-<script setup lang="ts">
-import NavBar from "@/components/NavBar.vue";
-import Logout from "@/components/Logout.vue";
-import { authService } from "@/services/auth";
-</script>
-
 <style scoped>
 .layout-header-title {
   margin-top: 0;

web/src/components/Logout.vue

@@ -1,15 +1,16 @@
-<template>
-  <n-button quaternary round @click="handleLogout">退出</n-button>
-</template>
-
 <script setup lang="ts">
-import { authService } from "@/services/auth";
+import { useAuthService } from "@/services/auth";
 import { useRouter } from "vue-router";
 
 const router = useRouter();
+const { logout } = useAuthService();
 
 const handleLogout = () => {
-  authService.logout();
-  router.push("/login");
+  logout();
+  router.replace("/login");
 };
 </script>
+
+<template>
+  <n-button quaternary round @click="handleLogout">退出</n-button>
+</template>

web/src/components/NavBar.vue

@@ -1,10 +1,6 @@
-<template>
-  <n-menu mode="horizontal" :options="menuOptions" :value="activeMenu" responsive />
-</template>
-
 <script setup lang="ts">
 import type { MenuOption } from "naive-ui";
-import { h, computed } from "vue";
+import { computed, h } from "vue";
 import { RouterLink, useRoute } from "vue-router";
 
 const menuOptions: MenuOption[] = [
@@ -33,3 +29,7 @@ function renderMenuItem(key: string, label: string): MenuOption {
   };
 }
 </script>
+
+<template>
+  <n-menu mode="horizontal" :options="menuOptions" :value="activeMenu" responsive />
+</template>