From ffde8dbb92b528cd5d52dff2e6197640427e20f1 Mon Sep 17 00:00:00 2001 From: Jason Date: Fri, 17 Sep 2021 18:11:07 +0800 Subject: [PATCH] =?UTF-8?q?vuex=E6=8C=81=E4=B9=85=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 3 ++- src/router/index.ts | 5 ++--- src/store/index.ts | 39 +++++++++++++++++++++++++++++---------- src/store/modules/auth.ts | 25 ++++--------------------- src/utils/request.ts | 5 ++--- src/views/Auth/login.vue | 5 +++++ yarn.lock | 13 +++++++++++++ 7 files changed, 57 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 22f6902..35e13c9 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "store": "^2.0.12", "vue": "^3.2.11", "vue-router": "^4.0.11", - "vuex": "^4.0.2" + "vuex": "^4.0.2", + "vuex-persistedstate": "^4.0.0" }, "devDependencies": { "@types/store": "^2.0.2", diff --git a/src/router/index.ts b/src/router/index.ts index 5000f5c..a08abd8 100644 --- a/src/router/index.ts +++ b/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(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 } }) diff --git a/src/store/index.ts b/src/store/index.ts index 92a25b4..0136d69 100644 --- a/src/store/index.ts +++ b/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> = Symbol() export interface State { isLogin: boolean - userInfo: UserInfo + accessToken: string + tokenType: string auth?: AuthState refresh?: RefreshState } @@ -20,18 +19,38 @@ export default createStore({ 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 => { return baseUseStore(key) diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts index e7da166..c144745 100644 --- a/src/store/modules/auth.ts +++ b/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) }) } diff --git a/src/utils/request.ts b/src/utils/request.ts index 6d4b943..df80738 100644 --- a/src/utils/request.ts +++ b/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 } diff --git a/src/views/Auth/login.vue b/src/views/Auth/login.vue index 1bdc67e..a20cadb 100644 --- a/src/views/Auth/login.vue +++ b/src/views/Auth/login.vue @@ -1,6 +1,7 @@