如何维持前端页面中内嵌iframe的登录态

要实现 iframe 弹窗只需登录一次，下次打开仍是已登录状态的功能，可以通过以下几种方法实现：

1. 共享session或token：

   • 父页面（主站）和iframe（子站点）之间如果是同一域名或满足同源策略，可以直接共享sessionStorage或localStorage中的登录信息。在用户登录主站时，将登录凭证（如JWT token）保存到sessionStorage或localStorage，iframe加载时检查是否存在此凭证并自动登录。

   // 主站登录成功后保存token
   localStorage.setItem('authToken', userAuthToken);
   
   // iframe加载时检查并使用token登录
   const authToken = window.parent.localStorage.getItem('authToken');
   if (authToken) {
     // 使用authToken向服务器验证身份
   }
   

2. 跨域共享：

   • 如果主站和iframe属于不同域名，可通过postMessage API实现跨域通信，登录成功后，父页面向iframe发送登录凭证，iframe接收后完成登录。

   // 主站登录成功后发送消息给iframe
   window.frames['iframeId'].postMessage({ authToken: userAuthToken }, 'https://child-domain.com');
   
   // iframe监听message事件并处理登录
   window.addEventListener('message', function(event) {
     if (event.origin === 'https://main-domain.com') {
       const authToken = event.data.authToken;
       // 使用authToken向服务器验证身份
     }
   });
   

3. SSO（单点登录）：

   • 如果你的应用支持单点登录服务，那么无论用户在哪个子系统登录，只要通过认证中心验证过身份，都可以在其他子系统间自由切换而无需重新登录。

4. Cookie + CORS：

   • 子站点配置CORS允许主站点的请求，并设置相关的Cookie策略（如SameSite属性），使得主站登录后可以将登录凭证写入到子站点的Cookie中，下次iframe加载时可以从Cookie中获取到登录信息。

总之，关键在于合理地管理和共享用户的身份验证信息，同时确保安全性。注意在实际应用中，应根据安全策略和隐私政策谨慎处理敏感信息，遵循最小权限原则。