vuex持久化

src/router/index.ts

@@ -1,6 +1,5 @@
-import { ACCESS_TOKEN } from '@/config'
+import vuex from '@/store'
 import type { MyRouteMeta, MyRouteRecordRaw } from '@/types/router'
-import store from 'store'
 import { createRouter, createWebHistory } from 'vue-router'
 import auth from './routers/auth'
 import user from './routers/user'
@@ -51,7 +50,7 @@ const router = createRouter({
 router.beforeEach((to, from, next) => {
     typeof to.meta !== 'undefined' && setDocumentTitle(<MyRouteMeta>to.meta)
 
-    const isAuthenticated: string = store.get(ACCESS_TOKEN)
+    const isAuthenticated: string = vuex.getters.isLogin
 
     if (to.name !== 'AuthLogin' && to.meta.requiresAuth && !isAuthenticated) {
         next({ name: 'AuthLogin', query: { to: to.path } })

src/store/index.ts

@@ -1,17 +1,16 @@
-import { UserInfo } from '@/types/user'
+import { LoginResponse } from '@/types/auth'
 import { InjectionKey } from 'vue'
 import { createStore, Store, useStore as baseUseStore } from 'vuex'
+import createPersistedState from 'vuex-persistedstate'
 import auth, { AuthState } from './modules/auth'
 import refresh, { RefreshState } from './modules/refresh'
 
-/**
- * 这个KEY，是为了针对 state 的类型提示来用的
- */
 export const key: InjectionKey<Store<State>> = Symbol()
 
 export interface State {
     isLogin: boolean
-    userInfo: UserInfo
+    accessToken: string
+    tokenType: string
     auth?: AuthState
     refresh?: RefreshState
 }
@@ -20,18 +19,38 @@ export default createStore<State>({
     strict: true,
     state: {
         isLogin: false,
-        userInfo: {} as UserInfo
+        accessToken: '',
+        tokenType: ''
+    },
+    getters: {
+        isLogin: (state: State) => {
+            return state.isLogin
+        },
+        // 获取组合后的token
+        accessToken: (state: State) => {
+            return state.tokenType + ' ' + state.accessToken
+        }
+    },
+    mutations: {
+        setAccessToken (state: State, payload: LoginResponse) {
+            state.accessToken = payload.access_token
+            state.tokenType = payload.token_type
+            state.isLogin = true
+        },
+        cleanAccessToken (state: State) {
+            state.accessToken = ''
+            state.tokenType = ''
+            state.isLogin = false
+        }
     },
-    getters: {},
-    mutations: {},
     actions: {},
     modules: {
         auth,
         refresh
-    }
+    },
+    plugins: [createPersistedState()]
 })
 
-// 导出函数，为了简化 useStore 的使用
 // import { useStore } from '@/store'
 export const useStore = (): Store<State> => {
     return baseUseStore(key)

src/store/modules/auth.ts

@@ -1,35 +1,19 @@
 import { auth } from '@/api'
 import { State } from '@/store'
-import { LoginData, LoginResponse } from '@/types/auth'
+import { LoginData } from '@/types/auth'
 import { Module } from 'vuex'
 
-const initState = {
-    accessToken: '',
-    accessType: '',
-    isLogin: false
-}
+const initState = {}
 
 export default {
     strict: true,
     namespaced: true,
     state: initState,
-    mutations: {
-        login (state: AuthState, payload: LoginResponse) {
-            state.accessToken = payload.access_token
-            state.accessType = payload.token_type
-            state.isLogin = true
-        },
-        logout (state: AuthState) {
-            state.accessToken = ''
-            state.accessType = ''
-            state.isLogin = false
-        }
-    },
     actions: {
         Login: ({ commit }, payload: LoginData) => {
             return new Promise((resolve, reject) => {
                 auth.login(payload).then(response => {
-                    commit('login', response)
+                    commit('setAccessToken', response, { root: true })
                     commit('refresh/setUser', true, { root: true })
                     resolve(response)
                 }).catch(error => {
@@ -37,10 +21,9 @@ export default {
                 })
             })
         },
-        // 登出
         Logout ({ commit }) {
             return new Promise((resolve) => {
-                commit('logout')
+                commit('cleanAccessToken', null, { root: true })
                 resolve(true)
             })
         }

src/utils/request.ts

@@ -1,6 +1,5 @@
-import { ACCESS_TOKEN } from '@/config'
+import vuex from '@/store'
 import axios, { AxiosRequestConfig } from 'axios'
-import store from 'store'
 import router from '../router'
 
 const request = axios.create({
@@ -13,7 +12,7 @@ const request = axios.create({
  * @param config
  */
 const axiosConf = (config: AxiosRequestConfig) => {
-    config.headers.Authorization = store.get(ACCESS_TOKEN)
+    config.headers.Authorization = vuex.getters.accessToken
     config.headers.Accept = 'application/json'
     return config
 }

src/views/Auth/login.vue

@@ -1,6 +1,7 @@
 <template>
   登录
   <button @click="onLogin">一键登录</button>
+  <button @click="onLogout">退出登录</button>
 </template>
 
 <script lang="ts" setup>
@@ -15,6 +16,10 @@ const onLogin = () => {
     console.error('error', err)
   })
 }
+
+const onLogout = () => {
+  store.dispatch('auth/Logout')
+}
 </script>
 
 <style scoped>