处理登录逻辑

src/api/index.ts

@@ -1,5 +1,7 @@
-import auth from '@/api/interfaces/auth'
+import auth from './interfaces/auth'
+import user from './interfaces/user'
 
 export {
-    auth
+    auth,
+    user
 }

src/api/interfaces/auth.ts

@@ -9,7 +9,12 @@ const register = (data: LoginData): Promise<LoginResponse> => {
     return request.post('user/auth/register', data)
 }
 
+const logout = (): Promise<string> => {
+    return request.post('user/auth/logout')
+}
+
 export default {
     login,
-    register
+    register,
+    logout
 }

src/api/interfaces/user.ts

@@ -0,0 +1,10 @@
+import { BaseInfo } from '@/types/user'
+import request from '@/utils/request'
+
+const info = (): Promise<BaseInfo> => {
+    return request.get('user/info')
+}
+
+export default {
+    info
+}

src/store/index.ts

@@ -37,7 +37,7 @@ export default createStore<State>({
         accessToken: (state: State): string => {
             return state.tokenType + ' ' + state.accessToken
         },
-        user: (state: State): BaseInfo => {
+        userInfo: (state: State): BaseInfo => {
             return state.user
         }
     },
@@ -64,7 +64,11 @@ export default createStore<State>({
             state.user = {} as BaseInfo
         }
     },
-    actions: {},
+    actions: {
+        setUserInfo ({ commit }, info: BaseInfo) {
+            commit('setUserInfo', info)
+        }
+    },
     modules: {
         auth,
         refresh

src/store/modules/auth.ts

@@ -22,12 +22,16 @@ export default {
                 })
             })
         },
-        Logout ({ commit }) {
-            return new Promise((resolve) => {
-                commit('cleanAccessToken', null, { root: true })
-                commit('cleanUserInfo', null, { root: true })
-                localStorage.removeItem(PERSISTED_KEY)
-                resolve(true)
+        Logout: ({ commit }) => {
+            return new Promise((resolve, reject) => {
+                auth.logout().then(() => {
+                    commit('cleanAccessToken', null, { root: true })
+                    commit('cleanUserInfo', null, { root: true })
+                    localStorage.removeItem(PERSISTED_KEY)
+                    resolve(true)
+                }).catch(err => {
+                    reject(err.message)
+                })
             })
         }
     }

src/views/Auth/login.vue

@@ -1,25 +1,27 @@
 <template>
   登录
   <button @click="onLogin">一键登录</button>
-  <button @click="onLogout">退出登录</button>
 </template>
 
 <script lang="ts" setup>
 import { useStore } from '@/store'
+import { useRoute, useRouter } from 'vue-router'
 
+const router = useRouter()
+const route = useRoute()
 const store = useStore()
 
 const onLogin = () => {
-  store.dispatch('auth/Login', { username: '15555555555', password: '123123' }).then(res => {
-    console.log('res', res)
+  store.dispatch('auth/Login', { username: '15555555555', password: '123123' }).then(() => {
+    if (route.query.to) {
+      router.replace({ path: route.query.to })
+    } else {
+      router.replace({ name: 'Home' })
+    }
   }).catch(err => {
-    console.error('error', err)
+    alert(err.message)
   })
 }
-
-const onLogout = () => {
-  store.dispatch('auth/Logout')
-}
 </script>
 
 <style scoped>

src/views/Home/index.vue

@@ -1,11 +1,24 @@
 <template>
   <div class="home">
-
+    <h1>{{ info.user_id }}</h1>
+    <h2>{{ info.nickname }}</h2>
+    <h3>{{ info.username }}</h3>
+    <img :src="info.avatar" width="80" alt="">
   </div>
 </template>
 
-<script lang="ts" setup>
+<script lang="ts">
+// 为了兼容vue3的keep-alive，页面名称要与router.meta中一致且不能省略
+// export default {
+//   name: 'Home'
+// }
+</script>
 
+<script lang="ts" setup>
+import { useStore } from '@/store'
+
+const store = useStore()
+const info = store.getters.userInfo
 </script>
 
 <style scoped>

src/views/User/index.vue

@@ -1,21 +1,56 @@
 <template>
   用户中心
+  <h1>{{ info.user_id }}</h1>
+  <h2>{{ info.nickname }}</h2>
+  <h3>{{ info.username }}</h3>
+  <img :src="info.avatar" width="80" alt="">
+  <button @click="onLogout">退出登录</button>
 </template>
 
-<script lang="ts" setup>
-import { useStore } from '@/store'
-
-const store = useStore()
-console.log(store.getters['refresh/user'])
-store.dispatch('refresh/setUser', false)
-</script>
-
 <script lang="ts">
+// 为了兼容vue3的keep-alive，页面名称要与router.meta中一致且不能省略
 export default {
   name: 'User'
 }
 </script>
 
+<script lang="ts" setup>
+import { user } from '@/api'
+import { useStore } from '@/store'
+import { UserInfo } from '@/types/user'
+import { onActivated, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+const store = useStore()
+const router = useRouter()
+const info = ref<UserInfo>({})
+
+onMounted(() => {
+  loadUserInfo()
+})
+
+onActivated(() => {
+  if (store.getters['refresh/user']) {
+    loadUserInfo()
+    store.dispatch('refresh/setUser', false)
+  }
+})
+
+const loadUserInfo = (): void => {
+  console.log('加载用户信息')
+  user.info().then(res => {
+    store.dispatch('setUserInfo', res)
+    info.value = res
+  })
+}
+
+const onLogout = () => {
+  store.dispatch('auth/Logout').then(() => {
+    router.replace({ name: 'Home' })
+  })
+}
+</script>
+
 <style scoped>
 
 </style>