feat: 完成 #3 登录页面和认证功能

src/main.js

@@ -1,14 +1,13 @@
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import router from './router'
 import App from './App.vue'
+import { pinia } from './stores'
 import './style.css'
 
 const app = createApp(App)
-const pinia = createPinia()
 
 // 注册所有 Element Plus 图标
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

src/router/index.js

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '../stores/user'
+import { pinia } from '../stores'
 
 const routes = [
   {
@@ -83,16 +85,36 @@ const router = createRouter({
 })
 
 // 路由守卫
-router.beforeEach((to, from, next) => {
+router.beforeEach(async (to, from, next) => {
-  const token = localStorage.getItem('admin_token')
+  const userStore = useUserStore(pinia)
+  const token = userStore.token
 
-  if (to.meta.requiresAuth && !token) {
+  if (!to.meta.requiresAuth) {
-    next('/login')
+    if (to.path === '/login' && token) {
-  } else if (to.path === '/login' && token) {
+      try {
+        await userStore.ensureProfileLoaded()
         next('/')
-  } else {
+      } catch (error) {
         next()
       }
+      return
+    }
+    next()
+    return
+  }
+
+  if (!token) {
+    next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
+    return
+  }
+
+  try {
+    await userStore.ensureProfileLoaded()
+    next()
+  } catch (error) {
+    userStore.logout()
+    next('/login')
+  }
 })
 
 export default router

src/stores/index.js

@@ -0,0 +1,3 @@
+import { createPinia } from 'pinia'
+
+export const pinia = createPinia()

src/stores/user.js

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { login as loginApi, getProfile } from '../api/auth'
+import { getProfile, login as loginApi, logout as logoutApi } from '../api/auth'
 
 export const useUserStore = defineStore('user', {
   state: () => ({
@@ -35,7 +35,21 @@ export const useUserStore = defineStore('user', {
       }
     },
 
+    async ensureProfileLoaded() {
+      if (!this.token) {
+        throw new Error('未登录')
+      }
+      if (this.userInfo) {
+        return this.userInfo
+      }
+      const res = await this.fetchUserInfo()
+      return res.data
+    },
+
     logout() {
+      if (this.token) {
+        logoutApi().catch(() => {})
+      }
       this.token = ''
       this.userInfo = null
       localStorage.removeItem('admin_token')

src/views/login/index.vue

@@ -59,12 +59,13 @@
 
 <script setup>
 import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import { User, Lock } from '@element-plus/icons-vue'
 import { useUserStore } from '../../stores/user'
 
 const router = useRouter()
+const route = useRoute()
 const userStore = useUserStore()
 
 const loginFormRef = ref(null)
@@ -95,7 +96,9 @@ const handleLogin = async () => {
     try {
       await userStore.login(loginForm.username, loginForm.password)
       ElMessage.success('登录成功')
-      router.push('/')
+      const redirectPath =
+        typeof route.query.redirect === 'string' ? route.query.redirect : '/'
+      router.push(redirectPath)
     } catch (error) {
       console.error('登录失败:', error)
     } finally {