Laravel+Vue应用中会话Cookie过期时清除Local Storage的方法

下面给你几个实用的方案，能解决会话过期后localStorage里authenticated还保留true的问题：

方案一：通过后端接口响应同步状态 #

每次前端请求后端接口时，依赖后端返回的真实认证状态来同步前端存储，这是最可靠的方式：

1. 后端可以利用Laravel的默认认证机制，当会话过期时，API请求会返回401未授权状态；也可以在响应中主动携带认证状态：

// 示例：在API响应中添加认证状态
return response()->json([
    'data' => $data,
    'is_authenticated' => auth()->check()
]);

2. 前端Vue中用axios拦截器统一处理响应：

// 配置axios响应拦截器
axios.interceptors.response.use(
    response => {
        // 如果后端明确返回未认证，清除localStorage
        if (response.data?.is_authenticated === false) {
            localStorage.removeItem('authenticated');
            window.location.href = '/login';
        }
        return response;
    },
    error => {
        // 捕获Laravel会话过期返回的401错误
        if (error.response?.status === 401) {
            localStorage.removeItem('authenticated');
            window.location.href = '/login';
        }
        return Promise.reject(error);
    }
);

方案二：前端根据会话过期时间设置定时器 #

登录时从后端获取会话有效期，前端设置定时器到期自动清除存储：

1. 后端登录接口返回会话过期时长：

// 登录成功后返回配置中的会话有效期（分钟）
return response()->json([
    'message' => '登录成功',
    'expire_minutes' => config('session.lifetime')
]);

2. 前端登录成功后启动定时器：

axios.post('/login', loginForm).then(res => {
    localStorage.setItem('authenticated', 'true');
    const expireMs = res.data.expire_minutes * 60 * 1000;
    // 到期自动清除存储并跳转登录页
    setTimeout(() => {
        localStorage.removeItem('authenticated');
        window.location.href = '/login';
    }, expireMs);
});

注意：这个方案依赖客户端与服务器时间同步，若用户修改本地时间会失效，适合对精度要求不高的场景。

方案三：路由守卫中校验会话状态 #

在Vue路由跳转前，调用后端校验接口（比如获取用户信息的接口），确认会话有效性：

// 在router/index.js中添加全局前置守卫
router.beforeEach(async (to, from, next) => {
    const frontAuth = localStorage.getItem('authenticated') === 'true';
    // 访问需要登录的路由时，去后端校验真实状态
    if (to.meta.requiresAuth && frontAuth) {
        try {
            await axios.get('/api/user'); // 会话过期时该接口会返回401
        } catch (err) {
            localStorage.removeItem('authenticated');
            next('/login');
            return;
        }
    }
    next();
});

内容的提问来源于stack exchange，提问作者Alphy Gacheru