diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue index 3be06373..e17ceb4d 100644 --- a/src/layouts/components/UserProfile.vue +++ b/src/layouts/components/UserProfile.vue @@ -9,7 +9,7 @@ const store = useStore(); // 执行注销操作 const logout = () => { // 清除登录状态信息 - store.dispatch('clearToken'); + store.dispatch('auth/clearToken'); // 重定向到登录页面或其他适当的页面 router.push('/login') diff --git a/src/pages/login.vue b/src/pages/login.vue index a5c195c6..41786b2b 100644 --- a/src/pages/login.vue +++ b/src/pages/login.vue @@ -62,8 +62,8 @@ const login = () => { const token = response.access_token; // 更新token和remember状态到Vuex Store - store.dispatch('updateToken', token); - store.dispatch('updateRemember', form.value.remember); + store.dispatch('auth/updateToken', token); + store.dispatch('auth/updateRemember', form.value.remember); // 跳转到首页 router.push('/') @@ -90,8 +90,8 @@ const login = () => { // 自动登录 onMounted(() => { // 从Vuex Store中获取token和remember状态 - const token = store.getters.getToken; - const remember = store.getters.getRemember; + const token = store.state.auth.token; + const remember = store.state.auth.remember; // 如果token存在,且保持登录状态为true,则跳转到首页 if (token && remember) { diff --git a/src/router/index.ts b/src/router/index.ts index 51ab1e60..d410d539 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -105,7 +105,7 @@ const router = createRouter({ // 导航守卫 router.beforeEach((to, from, next) => { // 通过 Vuex Store 检查用户是否已登录 - const isAuthenticated = store.getters.getToken !== null; + const isAuthenticated = store.state.auth.token !== null; if (to.meta.requiresAuth && !isAuthenticated) { // 如果路由需要登录权限且用户未登录,则跳转到登录页面 next('/login'); diff --git a/src/store/auth.ts b/src/store/auth.ts new file mode 100644 index 00000000..c2e71b17 --- /dev/null +++ b/src/store/auth.ts @@ -0,0 +1,50 @@ +import { Module } from 'vuex'; + +// 定义状态类型 +interface AuthState { + token: string | null; + remember: boolean; +} + +// 定义根状态类型 +interface RootState { + auth: AuthState; +} + + +// 导出模块 +const authModule: Module = { + namespaced: true, + state: { + token: null, + remember: false, + }, + mutations: { + setToken(state, token: string) { + state.token = token; + }, + clearToken(state) { + state.token = null; + }, + setRemember(state, remember: boolean) { + state.remember = remember; + }, + }, + actions: { + updateToken({ commit }, token: string) { + commit('setToken', token); + }, + clearToken({ commit },) { + commit('clearToken'); + }, + updateRemember({ commit }, remember: boolean) { + commit('setRemember', remember); + }, + }, + getters: { + getToken: state => state.token, + getRemember: state => state.remember, + } +}; + +export default authModule; diff --git a/src/store/index.ts b/src/store/index.ts index 490b5ebf..c6a33cfe 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -1,52 +1,12 @@ -import { ActionTree, GetterTree, MutationTree, createStore } from 'vuex'; +import { createStore } from 'vuex'; import createPersistedState from 'vuex-persistedstate'; - -interface State { - // 登录token - token: string | null; - // 是否记住登录状态 - remember: boolean; -} - -const state: State = { - token: null, - remember: false, -}; - -const mutations: MutationTree = { - setToken(state, token: string) { - state.token = token; - }, - clearToken(state) { - state.token = null; - }, - setRemember(state, remember: boolean) { - state.remember = remember; - }, -}; - -const actions: ActionTree = { - updateToken({ commit }, token: string) { - commit('setToken', token); - }, - clearToken({ commit },) { - commit('clearToken'); - }, - updateRemember({ commit }, remember: boolean) { - commit('setRemember', remember); - }, -}; - -const getters: GetterTree = { - getToken: state => state.token, - getRemember: state => state.remember, -}; +import authModule from './auth'; const store = createStore({ - state, - mutations, - actions, - getters, + modules: { + // 用户认证store + auth: authModule, + }, plugins: [ createPersistedState({ // 配置持久化存储的选项