fix login

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>

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()
   }

src/views/LoginView.vue

@@ -1,19 +1,18 @@
 <template>
   <div class="login-container">
-    <div v-if="!isLogin">
     <a-form
-        :model="formState"
-        name="basic"
       :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"
-          :rules="[{ required: true, message: 'Please input your username!' }]"
       >
         <a-input v-model:value="formState.username">
           <template #prefix>
@@ -23,9 +22,9 @@
       </a-form-item>
 
       <a-form-item
+        :rules="[{ required: true, message: 'Please input your password!' }]"
         label="Password"
         name="password"
-          :rules="[{ required: true, message: 'Please input your password!' }]"
       >
         <a-input-password v-model:value="formState.password">
           <template #prefix>
@@ -34,19 +33,15 @@
         </a-input-password>
       </a-form-item>
 
-        <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
+      <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-button html-type="submit" type="primary">Submit</a-button>
       </a-form-item>
     </a-form>
   </div>
-    <div v-else>
-      <p>Welcome, you are logged in!</p>
-    </div>
-  </div>
 </template>
 <script setup>
 import { reactive, ref, onMounted } from 'vue'
@@ -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')