Nuxt中JWT授权缓存问题：如何阻止AccessToken写入__NUXT__变量？

这个场景我在做Nuxt项目时也踩过坑——强缓存页面时把服务端注入到window.__NUXT__里的AccessToken给一起缓存了，导致用户更新token后还是用旧的，确实挺头疼的。下面给你几个针对性的解决方案，按可行性排序：

方案一：彻底将AccessToken的管理限制在客户端 #

核心思路就是不让AccessToken出现在服务端渲染的共享状态中，完全交给客户端从Cookie读取和维护，从根源避免被缓存。

步骤1：修改nuxtServerInit，移除token的共享状态写入 #

// store/index.js
import cookie from 'cookie';
export const state = () => ({
  authCookie: 'MyAuthCookie',
});
export const actions = {
  async nuxtServerInit({ dispatch, commit, state }, { req }) {
    // 这里不再处理AccessToken的全局状态写入
    // 如果服务端渲染需要授权数据，可以单独发起请求（见方案三补充），但不要把token存进共享状态
  },
};

步骤2：新增客户端专用插件处理token #

创建一个仅在客户端执行的插件，页面加载时从Cookie读取最新的token并维护状态：

// plugins/auth.client.js
import cookie from 'cookie';

export default function({ store, app }) {
  // 仅客户端执行，读取当前Cookie中的最新token
  const accessToken = cookie.parse(document.cookie)[store.state.authCookie];
  if (accessToken) {
    store.commit('auth/setAccessToken', accessToken);
  }

  // 保持axios请求头的设置逻辑
  app.$axios.onRequest((config) => {
    if (store.getters['auth/isLoggedIn']) {
      config.headers.common.Authorization = `Bearer ${store.state.auth.accessToken}`;
    }
  });
}

步骤3：在Nuxt配置中注册客户端插件 #

确保插件只在客户端运行，避免服务端注入：

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/auth.client.js', mode: 'client' }
  ]
}

这样服务端渲染的window.__NUXT__里不会包含任何敏感的token信息，客户端每次加载都会读取最新的Cookie，彻底摆脱缓存影响。

方案二：服务端渲染时临时使用token，不存入共享状态 #

如果你的页面需要服务端渲染授权内容（比如用户个人信息），可以在nuxtServerInit里临时用token请求数据，但绝不把token存入共享状态：

// store/index.js
export const actions = {
  async nuxtServerInit({ dispatch, commit, state }, { req }) {
    const accessToken = req.headers.cookie && cookie.parse(req.headers.cookie)[state.authCookie];
    if (accessToken) {
      // 直接用token发起服务端请求，获取渲染所需的用户数据
      const userProfile = await this.$axios.$get('/api/user/profile', {
        headers: { Authorization: `Bearer ${accessToken}` }
      });
      // 仅存入用户非敏感数据，不存token
      commit('user/setProfile', userProfile);
    }
  },
};

客户端的token管理依然用方案一的逻辑，这样共享状态里只有用户信息，不会被缓存影响token的更新。

方案三：CDN层动态替换（复杂但适合特殊场景） #

如果必须保留服务端注入token的逻辑，可以借助Akamai的EdgeWorkers功能，在CDN层面动态替换window.__NUXT__中的token值。不过这个方案需要你对Akamai的配置有一定了解，且维护成本较高，仅推荐给无法修改前端逻辑的场景。

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