使用Pinia结合localStorage后跳转仪表盘路由失效问题

使用Pinia结合localStorage实现登录功能后，登录成功跳转至dashboard的路由出现间歇性失效：有时可正常跳转，有时无响应，其余路由功能均正常，推测问题与Pinia中的路由导入或状态同步有关。以下是相关实现代码：

AuthStore 代码 #

import {defineStore} from "pinia";
import axios from "axios";
import router from "../router";

export const useAuthStore = defineStore("auth", {
    state: () => ({
        errors: {},
        isLoading: false,
        success: {}
    }),
    getters: {
        userToken: () => localStorage.getItem("token"),
        loggedInUser: () => JSON.parse(localStorage.getItem("user")),
    },
    actions: {
        async register(data) {
            try {
                this.isLoading = true;
                await axios.post('/register', data).then((res) => {
                    this.isLoading = false;
                    this.success.message = res.data.message;
                    this.scrollToTop()
                    this.clearAlert();

                });
            } catch (error) {
                console.log(error);
                this.isLoading = false;
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors
                    this.scrollToTop()
                    this.clearAlert();
                }
            }

        },
        async activateAccount(data) {
            try {
                this.isLoading = true
                await axios.post('/activate', data).then((res) => {
                    this.isLoading = false;
                    this.success.message = res.data.message;
                    router.push({name: "login"});
                    this.scrollToTop()
                    this.clearAlert();

                });
            } catch (error) {

                this.isLoading = false;
                if (error.response.status === 500) {
                    this.errors.error = error.response.data.error
                    this.scrollToTop()
                    this.clearAlert();
                }
            }
        },
        async login(data) {
            try {
                this.isLoading = true;
                let res = await axios.post('/login', data);
                this.isLoading = false;
                localStorage.setItem("token", res.data.access_token);
                localStorage.setItem("user", JSON.stringify(res.data.user));
                router.push({name: "dashboard"});

            } catch (error) {
                console.log(error);
                this.isLoading = false;
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors
                    this.scrollToTop()
                    this.clearAlert();
                }
                if (error.response.status === 401) {
                    this.errors.error = error.response.data.error
                    this.scrollToTop()
                    this.clearAlert();

                }
            }
        },
        async logout(token) {
            await axios.get('/logout', {headers: {Authorization: `Bearer ${localStorage.getItem('token')}`}}).then((res) => {
                this.clearLocalStorage();
                router.push({name: "login"})
            });
        },
        async forgotPassword(data) {
            try {
                this.isLoading = true;
                await axios.post('/send-password-reset-code', data).then((res) => {
                    this.isLoading = false;
                    this.success.message = res.data.message;
                    this.scrollToTop()
                    this.clearAlert();
                });
            } catch (error) {
                this.isLoading = false;
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors
                    this.scrollToTop()
                    this.clearAlert();
                }
            }
        },
        async resetPassword(data) {
            try {
                this.isLoading = true;
                await axios.post('/reset-password', data).then((res) => {
                    this.isLoading = false;
                    this.success.message = res.data.message;
                    router.push({name: "login"})
                    this.scrollToTop()
                    this.clearAlert();

                });
            } catch (error) {

                this.isLoading = false;
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors
                    this.scrollToTop()
                    this.clearAlert();
                }

                if (error.response.status === 500) {
                    this.errors.error = error.response.data.error
                    this.scrollToTop()
                    this.clearAlert();
                }
            }
        },
        clearAlert() {
            setTimeout(() => this.errors = {}, 8000);
            setTimeout(() => this.success = {}, 8000);
        },
        scrollToTop() {
            window.scrollTo(0, 0);
        },
        clearLocalStorage() {
            localStorage.setItem("token", '');
            localStorage.setItem("user", {});
        },
    },
});

main.js 代码 #

import {useAuthStore} from "./stores/Authstore";
import './assets/style.css'
import './axios'
import {createApp} from 'vue'
import {createPinia} from 'pinia'

import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)
app.use(createPinia())


router.beforeEach((to, from, next) => {

    const authStore = useAuthStore();
    if (to.meta.requiresAuth && !authStore.userToken) {
        next({name: 'login'})
    } else {
        next()
    }
});

app.mount('#app')

路由文件代码 #

import {createRouter, createWebHistory} from 'vue-router'
import HomeView from '../views/HomeView.vue'


const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: HomeView,
            meta: {requiresAuth: false},

        },
        {
            path: '/register',
            name: 'register',
            component: () => import('../views/RegistrationView.vue'),
            meta: {requiresAuth: false},

        },
        {
            path: '/activate/:email/:activationCode',
            name: 'activate',
            component: () => import('../views/ActivateAccountView.vue'),
            props: true,
            meta: {requiresAuth: false},

        },
        {
            path: '/login',
            name: 'login',
            component: () => import('../views/LoginView.vue'),
            meta: {requiresAuth: false},

        },
        {
            path: '/dashboard',
            name: 'dashboard',
            component: () => import('../views/DashboardView.vue'),
            meta: {requiresAuth: true},

        },
        {
            path: '/forgot-password',
            name: 'forgot-password',
            component: () => import('../views/ForgotPasswordView.vue'),
            meta: {requiresAuth: false},

        },
        {
            path: '/reset-password/:email/:passwordResetCode',
            name: 'reset-password',
            component: () => import('../views/ResetPasswordView.vue'),
            props : true,
            meta: {requiresAuth: false},

        },
    ]
})


export default router

问题根源 #

1. 状态同步竞态问题：登录时先写入localStorage再跳转，但路由守卫直接读取localStorage判断权限，可能存在写入与读取的时机差，导致守卫未检测到token，拦截了跳转。
2. Pinia状态与localStorage脱节：getter直接读取localStorage而非Pinia的响应式state，无法利用Pinia的状态同步机制，导致状态判断不准确。
3. 路由实例导入的潜在冲突：直接在Pinia中导入路由实例，若初始化顺序出现偏差，可能导致路由实例状态异常。

修复方案 #

1. 将用户状态同步到Pinia State（核心修复） #

把token和user存入Pinia的响应式state，从localStorage初始化状态，操作后同步到localStorage，确保状态判断的准确性：

import {defineStore} from "pinia";
import axios from "axios";
import router from "../router";

export const useAuthStore = defineStore("auth", {
    state: () => ({
        errors: {},
        isLoading: false,
        success: {},
        // 从localStorage初始化state
        token: localStorage.getItem("token") || '',
        user: JSON.parse(localStorage.getItem("user")) || null
    }),
    getters: {
        userToken: (state) => state.token,
        loggedInUser: (state) => state.user,
        // 新增登录状态判断getter
        isLoggedIn: (state) => !!state.token
    },
    actions: {
        async login(data) {
            try {
                this.isLoading = true;
                const res = await axios.post('/login', data);
                this.isLoading = false;
                // 更新Pinia state
                this.token = res.data.access_token;
                this.user = res.data.user;
                // 同步到localStorage
                localStorage.setItem("token", this.token);
                localStorage.setItem("user", JSON.stringify(this.user));
                router.push({name: "dashboard"});

            } catch (error) {
                console.log(error);
                this.isLoading = false;
                if (error.response.status === 422) {
                    this.errors = error.response.data.errors
                    this.scrollToTop()
                    this.clearAlert();
                }
                if (error.response.status === 401) {
                    this.errors.error = error.response.data.error
                    this.scrollToTop()
                    this.clearAlert();
                }
            }
        },
        async logout() {
            try {
                await axios.get('/logout', {headers: {Authorization: `Bearer ${this.token}`}});
            } catch (e) {
                console.log(e);
            } finally {
                // 清空Pinia state
                this.token = '';
                this.user = null;
                // 同步清空localStorage
                localStorage.removeItem("token");
                localStorage.removeItem("user");
                router.push({name: "login"})
            }
        },
        clearLocalStorage() {
            this.token = '';
            this.user = null;
            localStorage.removeItem("token");
            localStorage.removeItem("user");
        },
        // 其余action保持不变
    },
});

2. 优化路由守卫的权限判断 #

修改main.js中的路由守卫，使用Pinia的响应式getter判断登录状态，避免依赖localStorage的即时读取：

router.beforeEach((to, from, next) => {
    const authStore = useAuthStore();
    // 使用响应式的isLoggedIn getter判断
    if (to.meta.requiresAuth && !authStore.isLoggedIn) {
        next({name: 'login'})
    } else {
        next()
    }
});

3. 使用组合式API获取路由实例（可选） #

避免直接导入路由实例，改用Vue Router的useRouter() composable在Pinia action中获取路由实例，符合组合式API规范：

import {defineStore} from "pinia";
import axios from "axios";
import {useRouter} from 'vue-router';

export const useAuthStore = defineStore("auth", {
    // state和getters不变
    actions: {
        async login(data) {
            const router = useRouter(); // 在action内获取路由实例
            try {
                this.isLoading = true;
                const res = await axios.post('/login', data);
                this.isLoading = false;
                this.token = res.data.access_token;
                this.user = res.data.user;
                localStorage.setItem("token", this.token);
                localStorage.setItem("user", JSON.stringify(this.user));
                router.push({name: "dashboard"});
            } catch (error) {
                // 错误处理不变
            }
        },
        // 其余需要跳转的action均使用useRouter()获取路由实例
    },
});

验证修复 #

1. 登录成功后，检查Pinia DevTools中auth store的token和user状态是否正确更新
2. 多次测试登录跳转，确认dashboard路由稳定生效
3. 测试退出登录，确认状态同步清空且跳转正常

内容的提问来源于stack exchange，提问作者KEVIN AMAYI