如何在Nuxt应用每次请求后自动更新会话cookie的过期时效

DevOps 小满

2026-10-7

解决方案

你可以通过全局Axios响应拦截器实现每次API请求成功后自动刷新前端存储的会话过期时间，具体操作步骤如下：

步骤1：新增Axios拦截器插件

在项目plugins目录下新建axios-auth-refresh.js文件，内容如下：

export default function ({ $axios, $auth }) {
  $axios.interceptors.response.use(
    (response) => {
      // 仅在登录状态下更新过期时间
      if ($auth.loggedIn) {
        // 计算新的过期时间戳（秒级，和配置的maxAge保持一致）
        const newExpiration = Math.floor(Date.now() / 1000) + 86400
        // 刷新auth模块存储的本地过期时间
        $auth.$storage.setUniversal('auth._token_expiration.local', newExpiration)
      }
      return response
    },
    (error) => Promise.reject(error)
  )
}

步骤2：注册插件到Nuxt配置

修改nuxt.config.js的plugins配置项，新增刚才的插件：

export default {
  // 其他原有配置保持不变
  plugins: [
    '~/plugins/axios-auth-refresh'
  ]
}

可选优化点

如果你的Fastify后端会在响应头返回最新的会话过期时间，可以直接从响应头取值替换前端计算的逻辑，避免前后端时间差问题，示例：
```
// 假设后端返回x-session-expire-at头，值为秒级时间戳
const newExpiration = parseInt(response.headers['x-session-expire-at'], 10)
```
如果你需要过滤不需要刷新过期时间的请求，可以在拦截器里加判断逻辑，比如排除静态资源请求、非业务接口请求等。