From 1e7c921ae2fbbe1bf84d72664bbd3956ee70c755 Mon Sep 17 00:00:00 2001
From: LingandRX <rsgltzyd@hotmail.com>
Date: Sun, 17 Nov 2024 22:22:10 +0800
Subject: [PATCH] fix login

---
 src/App.vue             | 17 +++++---
 src/router/index.js     | 15 +++----
 src/views/LoginView.vue | 91 ++++++++++++++++++-----------------------
 3 files changed, 59 insertions(+), 64 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 629d785..2fd2cb7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,12 +18,12 @@
 </template>
 
 <script setup lang="js">
-import { RouterView } from 'vue-router'
-import { h, ref, onMounted } from 'vue'
+import { RouterView, useRoute } from 'vue-router'
+import { h, ref, onMounted, watch } from 'vue'
 import { AppstoreOutlined } from '@ant-design/icons-vue'
 import CustomCard from '@/components/CustomCard.vue'
 
-const isLogin = ref(false)
+const isLogin = ref(true)
 
 const current = ref(['mail'])
 const items = ref([
@@ -40,9 +40,16 @@ const items = ref([
     title: '关于'
   }
 ])
-onMounted(() => {
+
+const route = useRoute()
+
+const updateLoginStatus = () => {
   isLogin.value = !!localStorage.getItem('token')
-})
+  console.log('isLogin.value:', isLogin.value)
+}
+
+onMounted(updateLoginStatus)
+watch(route, updateLoginStatus)
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index 6bac95c..98c808f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -17,7 +17,7 @@ const routes = [
     name: 'login',
     component: () => import('../views/LoginView.vue'),
     meta: {
-      requiresAuth: false
+      requiresAuth: true
     }
   }
 ]
@@ -28,12 +28,13 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  console.log('beforeEach', to, from)
-  const token = localStorage.getItem('token')
-  if (to.matched.some((record) => record.meta.requiresAuth === false)) {
-    next()
-  } else if (!token) {
-    next({ name: 'login' })
+  const isLogin = !!localStorage.getItem('token')
+  const requiresAuth = to.matched.some((record) => !!record.meta['requiresAuth'])
+
+  console.log('isLogin', isLogin)
+  console.log('requiresAuth', requiresAuth)
+  if (!requiresAuth && !isLogin) {
+    next('/login')
   } else {
     next()
   }
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index fce119c..cc121ed 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,51 +1,46 @@
 <template>
   <div class="login-container">
-    <div v-if="!isLogin">
-      <a-form
-        :model="formState"
-        name="basic"
-        :label-col="labelCol"
-        :wrapper-col="wrapperCol"
-        autocomplete="off"
-        @finish="onFinish"
-        @finishFailed="onFinishFailed"
+    <a-form
+      :label-col="labelCol"
+      :model="formState"
+      :wrapper-col="wrapperCol"
+      autocomplete="off"
+      name="basic"
+      @finish="onFinish"
+      @finishFailed="onFinishFailed"
+    >
+      <a-form-item
+        :rules="[{ required: true, message: 'Please input your username!' }]"
+        label="Username"
+        name="username"
       >
-        <a-form-item
-          label="Username"
-          name="username"
-          :rules="[{ required: true, message: 'Please input your username!' }]"
-        >
-          <a-input v-model:value="formState.username">
-            <template #prefix>
-              <UserOutlined class="site-form-item-icon" />
-            </template>
-          </a-input>
-        </a-form-item>
+        <a-input v-model:value="formState.username">
+          <template #prefix>
+            <UserOutlined class="site-form-item-icon" />
+          </template>
+        </a-input>
+      </a-form-item>
 
-        <a-form-item
-          label="Password"
-          name="password"
-          :rules="[{ required: true, message: 'Please input your password!' }]"
-        >
-          <a-input-password v-model:value="formState.password">
-            <template #prefix>
-              <LockOutlined class="site-form-item-icon" />
-            </template>
-          </a-input-password>
-        </a-form-item>
+      <a-form-item
+        :rules="[{ required: true, message: 'Please input your password!' }]"
+        label="Password"
+        name="password"
+      >
+        <a-input-password v-model:value="formState.password">
+          <template #prefix>
+            <LockOutlined class="site-form-item-icon" />
+          </template>
+        </a-input-password>
+      </a-form-item>
 
-        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
-          <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
-        </a-form-item>
+      <a-form-item :wrapper-col="{ offset: 8, span: 16 }" name="remember">
+        <a-checkbox v-model:checked="formState.remember">Remember me</a-checkbox>
+      </a-form-item>
 
-        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
-          <a-button type="primary" html-type="submit">Submit</a-button>
-        </a-form-item>
-      </a-form>
-    </div>
-    <div v-else>
-      <p>Welcome, you are logged in!</p>
-    </div>
+      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
+        <a-button html-type="submit" type="primary">Submit</a-button>
+      </a-form-item>
+    </a-form>
   </div>
 </template>
 <script setup>
@@ -74,15 +69,6 @@ onMounted(() => {
   isLogin.value = !!localStorage.getItem('token')
 })
 
-const removeLoginRoute = () => {
-  const loginRoute = router.getRoutes().find((route) => route.name === 'login')
-  console.log('loginRoute:', loginRoute)
-  if (loginRoute) {
-    console.log(loginRoute.name)
-    router.removeRoute(loginRoute.name)
-  }
-}
-
 const onFinish = async (values) => {
   try {
     const response = await fetch('http://localhost:3000/users', {
@@ -95,10 +81,11 @@ const onFinish = async (values) => {
     const user = users.find(
       (user) => user.username === values.username && user.password === values.password
     )
+
+    // const user = { username: 'test', password: 'test', token: 'test' }
     if (user && user.token) {
       localStorage.setItem('token', user.token)
       isLogin.value = true
-      removeLoginRoute()
       await router.push('/')
     } else {
       alert('Invalid username or password')