如何在同一域名下的多个Vue.js应用间共享JWT令牌？

当然有可行的办法！针对你描述的主应用（登录+交易）和子目录评论应用共享JWT的场景，我整理了几个实用且易落地的方案：

1. 利用浏览器Cookie存储 #

这是同域名场景下最省心的方案之一，因为浏览器会自动在同域名（包括所有子目录）下共享Cookie。

• 实现步骤：
  • 主应用登录成功后，将JWT写入Cookie，注意设置path=/（确保整个域名下的所有路径都能访问到这个Cookie），示例代码：

    document.cookie = `jwt=${yourTokenValue}; path=/; secure; SameSite=Strict`;
    

    其中secure属性建议在HTTPS环境下开启，防止明文传输；SameSite=Strict可以降低CSRF风险。
  • 子应用直接读取Cookie中的JWT即可，你可以手动解析document.cookie，也可以用js-cookie这类库简化操作：

    import Cookies from 'js-cookie';
    const jwt = Cookies.get('jwt');
    

• 注意点：如果设置了HttpOnly属性，前端JS将无法读取Cookie，这种情况适合后端直接用Cookie验证请求，但如果子应用需要前端主动携带JWT到请求头，就不要设置HttpOnly。

2. 使用LocalStorage/SessionStorage存储 #

浏览器的localStorage和sessionStorage在同域名下也是共享的，适合需要前端直接操作令牌的场景：

• 实现步骤：
  • 主应用登录后，将JWT存入localStorage（持久化，除非手动清除）或sessionStorage（会话级，关闭浏览器即失效）：

    localStorage.setItem('jwt', yourTokenValue);
    

  • 子应用初始化时，直接读取存储中的令牌：

    const jwt = localStorage.getItem('jwt');
    

  • 可以给子应用的HTTP请求库（比如Axios）添加请求拦截器，自动将JWT放入请求头：

    axios.interceptors.request.use(config => {
      const jwt = localStorage.getItem('jwt');
      if (jwt) {
        config.headers.Authorization = `Bearer ${jwt}`;
      }
      return config;
    });
    

• 注意点：这类存储容易受到XSS攻击，所以一定要做好XSS防护——比如对用户输入的内容进行转义、启用内容安全策略（CSP）、避免使用eval等危险函数。

3. 结合状态管理工具同步令牌 #

如果你的应用使用了Vuex或Pinia，可以基于上述存储方案，让状态管理工具自动同步令牌：

• 实现步骤：
  • 主应用登录后，将JWT存入localStorage，同时更新自身的状态管理仓库。
  • 子应用的Pinia/Vuex仓库在初始化时，从localStorage读取JWT并初始化状态。
  • 监听storage事件：当主应用刷新或更新JWT时，子应用可以通过window.addEventListener('storage', ...)监听存储变化，自动更新本地的令牌状态，避免令牌过期后子应用仍使用旧令牌。

通用安全建议 #

• 令牌过期处理：主应用可以监听令牌过期事件，自动刷新令牌并更新存储中的值；子应用也要定期检查令牌有效性，必要时跳转主应用重新登录。
• HTTPS强制：生产环境一定要启用HTTPS，防止令牌在传输过程中被窃取。
• 令牌权限控制：确保JWT包含必要的权限声明，子应用只拥有发布评论所需的最小权限，避免权限过大带来的风险。

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