VueJS跳转域名后如何存储access_token实现自动登录？

你当前的思路不可行，因为调用window.location.replace后，当前页面的JS代码会立即停止执行，后续的存储逻辑根本不会运行；而且不同子域名的localStorage是相互隔离的，就算跳转前能存，新域名也读不到。

下面是几种可行的解决方案：

方案一：URL参数传递token #

跳转时把token作为URL参数携带到目标域名，目标页面接收后存入localStorage：

1. 修改原代码的跳转逻辑，传入token：

domainLogin() {
  const api = this.$store.state.api + "domainLogin";

  axios
    .post(api, {
      registry: this.registry,
      password: this.password
    })
    .then((response) => {
      const { tenant, access_token } = response.data;
      this.redirect(tenant, access_token);
      this.$store.commit("auth", access_token);
    })
    .catch((error) => {
      this.$message("Erro", error.response, "error");
    });
},

redirect(domain, token){
  window.location.replace(`https://${domain}.example.com.br?access_token=${encodeURIComponent(token)}`)    
},

2. 在目标域名的应用入口（比如App.vue的created钩子）处理参数：

created() {
  const urlParams = new URLSearchParams(window.location.search);
  const token = urlParams.get('access_token');
  if (token) {
    localStorage.setItem('access_token', decodeURIComponent(token));
    // 清除URL中的token参数，避免暴露在地址栏
    window.history.replaceState({}, document.title, window.location.pathname);
    // 执行自动登录逻辑
    this.handleAutoLogin();
  }
}

⚠️ 注意：URL参数会暴露在地址栏和历史记录中，建议配合HTTPS使用，或者对token添加短期有效期、签名校验，防止篡改和泄露。

方案二：父域名Cookie共享 #

如果所有子域名都属于example.com.br，可以把token存入父域名级别的Cookie，所有子域名都能读取该Cookie：

在登录成功后设置Cookie：

.then((response) => {
  const { tenant, access_token } = response.data;
  // 设置父域名Cookie，所有子域名可访问
  document.cookie = `access_token=${access_token}; domain=.example.com.br; path=/; secure; HttpOnly; SameSite=Lax`;
  this.redirect(tenant);
  this.$store.commit("auth", access_token);
})

目标域名的应用直接从Cookie中读取token，再存入localStorage或直接使用：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

// 在目标页面的入口逻辑中
const token = getCookie('access_token');
if (token) {
  localStorage.setItem('access_token', token);
  this.handleAutoLogin();
}

这种方式比URL参数更安全，Cookie的HttpOnly属性能防止XSS攻击窃取token，secure确保仅在HTTPS下传输。

方案三：后端生成一次性登录凭证 #

如果对安全性要求更高，可以让后端生成一个短期有效的一次性登录凭证（比如1分钟内有效），跳转时携带这个凭证到目标域名，目标域名的后端验证凭证后返回真实token，再存入localStorage。这种方式避免了直接暴露真实token。

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