完善登录状态管理: 1. 添加getUserInfo方法 2. 实现token本地存储 3. 添加退出登录功能

web/src/main.ts

@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import store, { useUserStore } from './store'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import { getToken } from './utils/storage'
 
 const app = createApp(App)
 
@@ -11,4 +12,11 @@ app.use(router)
 app.use(store)
 app.use(ElementPlus)
 
+// 初始化store中的token
+const token = getToken()
+if (token) {
+  const userStore = useUserStore()
+  userStore.setToken(token)
+}
+
 app.mount('#app')

web/src/store/modules/user.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { loginApi } from '../../api/login'
 import type { LoginForm } from '../../api/login/types'
+import { setToken as setStorageToken, removeToken } from '../../utils/storage'
 
 export const useUserStore = defineStore('user', () => {
   const token = ref('')
@@ -9,6 +10,7 @@ export const useUserStore = defineStore('user', () => {
 
   const setToken = (newToken: string) => {
     token.value = newToken
+    setStorageToken(newToken)
   }
 
   const setUserInfo = (info: object) => {
@@ -22,11 +24,16 @@ export const useUserStore = defineStore('user', () => {
     return res
   }
 
+  const getUserInfo = () => {
+    return userInfo.value
+  }
+
   return {
     token,
     userInfo,
     setToken,
     setUserInfo,
-    login
+    login,
+    getUserInfo
   }
 })

web/src/views/Layout/index.vue

@@ -48,7 +48,7 @@
             <template #dropdown>
               <el-dropdown-menu>
                 <el-dropdown-item>个人中心</el-dropdown-item>
-                <el-dropdown-item>退出登录</el-dropdown-item>
+                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
               </el-dropdown-menu>
             </template>
           </el-dropdown>
@@ -65,7 +65,9 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
+import { useUserStore } from '@/store/modules/user'
+import { removeToken } from '@/utils/storage'
 import {
   Menu as IconMenu,
   User,
@@ -77,9 +79,19 @@ import {
 const route = useRoute()
 const isCollapse = ref(false)
 
+const router = useRouter()
+const userStore = useUserStore()
+
 const toggleCollapse = () => {
   isCollapse.value = !isCollapse.value
 }
+
+const handleLogout = () => {
+  userStore.setToken('')
+  userStore.setUserInfo({})
+  removeToken()
+  router.push('/login')
+}
 </script>
 
 <style scoped>