不同域名下登录同步问题

最新推荐文章于 2022-02-25 15:46:44 发布

原创

最新推荐文章于 2022-02-25 15:46:44 发布 · 1.5k 阅读

收录于

博客探讨了在www.a.com和www.b.com不同域名下，如何实现登录状态同步。前端首先尝试通过ifame和postMessage通信，但遇到iOS设备的兼容性问题。备用方案是在www.a.com下重新部署www.b.com的内容，但由于资源路径问题不可行。最终采用将www.a.com/b映射到www.b.com并调整资源路径，以解决跨域问题。强调完美方案是后端参与，通过服务端处理跨域名登录同步。

问题描述

前端登录同步依赖localStorage，而localStorage只能在当前域名下访问。现www.a.com需要用www.b.com的登录页登录，登录完成的信息保存在www.b.com域下，如何将登录状态同步至www.a.com？

拟用方案

通过ifame，postMessage通信

在www.a.com中内嵌www.b.com的ifame，需要登录时将ifame置顶，登录成功后通过postMessage将登录信息传回至www.a.com。此方案理论上可行，但是登录页登录成功之后会有跳转，如果变成内嵌ifame需要做对应的改造，且不排除www.b.com放入ifame中访问可能会出现一些样式或功能上的问题，此方案未尝试。

在www.a.com中内嵌www.b.com下的一个页面c.html。需要登录时直接跳转www.b.com去登录，登录完成之后，c.html获取到www.b.com域下的

// www.a.com index.js
const login = function() {
  window.addEventListener(
    'message',
    e => {
      if (event.origin != 'https://www.b.com') return;
      console.log(e.data);
      localStorage.setItem('auth', e.data);
      Vue.prototype.$userKey = e.data;
    },
    fal