Nuxt3中localStorage存储auth token页面刷新后失效问题求助

解决方案 #

1. 修复Pinia状态刷新丢失问题 #

修改Pinia的状态初始化逻辑，让页面刷新时自动从localStorage恢复已保存的用户和token信息：

import { defineStore } from 'pinia'
import { axiosInstance } from '@/axios.config'
import { useRouter } from 'vue-router'

export const useAuth = defineStore('auth',{
    state: ()=>({
        // 初始化时从localStorage读取数据，没有则设为空值
        user: JSON.parse(localStorage.getItem('user') || '[]'),
        access_token: localStorage.getItem('access_token') || '',
    }),

    actions:{
        async loginUser(email:string, password:string){
            try{
                const res = await axiosInstance.post('/login',{email, password, withCredentials: true,})
                this.user = res.data.user
                this.access_token = res.data.access_token
                // 同时把用户信息存入localStorage
                localStorage.setItem("access_token", res.data.access_token)
                localStorage.setItem("user", JSON.stringify(res.data.user))
                useRouter().push('/')
              
             }catch(e){
                console.log(e.response?.data || e)
            }
        },
        // 可选：添加登出方法，清理状态和本地存储
        logout() {
            this.user = []
            this.access_token = ''
            localStorage.removeItem('access_token')
            localStorage.removeItem('user')
            useRouter().push('/login')
        }
    },
})

2. 用Axios拦截器动态设置Token #

Axios实例创建时的Authorization头是静态的，只会初始化一次，刷新后不会重新读取localStorage的token。改用请求拦截器，每次请求前动态注入token：

import axios from 'axios'

const API_URL = 'https://quiz.bojarm.pl/api';

export const axiosInstance = axios.create({
    baseURL: API_URL,
    headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
        // 移除无效的跨域头：前端设置Access-Control相关头无效，需后端配置
    },
})

// 请求拦截器：每次请求前动态添加token
axiosInstance.interceptors.request.use(
    (config) => {
        const token = localStorage.getItem('access_token')
        if (token) {
            config.headers.Authorization = `Bearer ${token}`
        }
        return config
    },
    (error) => Promise.reject(error)
)

// 可选：响应拦截器，处理token过期场景
axiosInstance.interceptors.response.use(
    (response) => response,
    (error) => {
        // 后端返回401时，说明token失效，触发登出
        if (error.response?.status === 401) {
            const authStore = useAuth()
            authStore.logout()
        }
        return Promise.reject(error)
    }
)

关键注意点 #

• 前端无需设置Access-Control-Allow-Origin、Access-Control-Allow-Headers，这些是后端服务器需要配置的响应头，前端设置无效。
• Pinia状态初始化时从localStorage读取，保证页面刷新后状态不丢失。
• Axios拦截器动态注入token，避免实例初始化时token未读取的问题。

内容的提问来源于stack exchange，提问作者Cyprian Wacław