qidao123.com技术社区-IT企服评测·应用市场

标题: 【前端】iframe嵌入单点登录链接后，一直访问登录页面？ [打印本页]
作者: 乌市泽哥    时间: 2025-1-14 18:05
标题: 【前端】iframe嵌入单点登录链接后，一直访问登录页面？

问题描述

有这么一个功能，上游系统通过iframe把我们系统的页面嵌入到他们页面内，于是我们需要提供一个链接，点击链接跳转到这个页面后，会去路由中获取用户信息，调接口进行登录操纵，获取token信息返回给当前页面，并将token信息缓存起来，后续哀求时带上一个token就可以了，在功能实现后，在欣赏器上面粘贴我们的地址就可以登录进去，本以为万事大吉，然后看看是否有跨域的问题，趁便就测试了一下在nginx的情况下，是否可以或许正常登录。
  1. http://10.0.0.1:8081/#/ssoLogin?code=xxx
复制代码
整了一个html页面，内里有个iframe标签，配的是我们下方的地址，扔到nginx内里，却发现始终会进入我们系统的登录页面，却不会登录到系统内里。
  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>SSO Login</title>    <style>        /* 你可以在这里添加样式 */        body, html {            margin: 0;            padding: 0;            width: 100%;            height: 100%;        }        iframe {            width: 100%;            height: 100%;            border: none;        }    </style></head><body>    <iframe src="http://10.0.0.1:8081/#/ssoLogin?code=xxx
  2. "></iframe></body></html>
复制代码

办理方案

先上答案，感爱好在往下看吧
我们使用的缓存token的方式是cokkie，
  1. Cookies.set(TokenKey, token)
复制代码
未曾想到，cokkie只能在同一域名下的所有窗口和标签页之间共享，而iframe时正好是两个ip，一个localhost的html和10.0.0.1的前端访问。所以token无法共享，页面没有token所以路由守卫自动跳转到了登录页面。
后改成sessionStorage，问题办理。
sessionStorage：仅在同一窗口或标签页中共享，不同窗口或标签页之间不共享。
Cookies：在同一域名下的所有窗口和标签页之间共享

排查过程

1. 猜疑是X-Frame-Options

由于之前遇到过iframe嵌入页面时，若被嵌入页面的nginx有安全限制，则无法被iframe。所以我第一时间就往这里想了，而且之前的时候是明确有这个报错信息的，这次在控制台却没有看到任何保持信息。
在nginx中参加下面的配置，发现无事发生。
  1. add_header X-Frame-Options ALLOWALL;
复制代码
后面实验了其他的方式进行排查。
   实在从开始我就应该想到不是这个缘故因由，因为欣赏器还能跳转到登录页面，并且控制台没有报错日志。
  2. 猜疑是Nginx配置问题导致的跨域

奇怪的是，并没有看到控制台跨域的报错，只能排撤除了
3. 猜疑是代码问题

这次我重新开始了断点调试，起首在ssoLogin页面，加载时会实行获取token方法
  1. openFullScreen2() {
  2.       const loading = this.$loading({
  3.         lock: true,
  4.         text: 'Loading',
  5.         spinner: 'el-icon-loading',
  6.         background: 'rgba(0, 0, 0, 0.7)'
  7.       })
  9.       this.$store
  10.           .dispatch('user/ssoLogin', this.loginForm)
  11.           .then(() => {
  12.             this.$router.push({ path: '/loginSuccess' })
  13.             loading.close()
  14.           })
  15.           .catch(() => {
  16.             loading.close()
  17.           })
  18.     }
复制代码
获取token之后，对token进行缓存
  1. ssoLogin({ commit }, userInfo) {
  2.     const { code } = userInfo
  3.     return new Promise((resolve, reject) => {
  4.       ssoLogin({ code: code }).then(response => {
  5.         const { data } = response
  7.         commit('SET_TOKEN', data.tokenType + ' ' + data.token)
  8.         setToken(data.tokenType + ' ' + data.token)
  10.         const userInfo = data.userId
  12.         commit('SET_USER_INFO', userInfo)
  14.         resolve()
  15.       }).catch(error => {
  16.         reject(error)
  17.       })
  18.     })
  19.   },
复制代码
  1. export function setToken(token) {  return Cookies.set(TokenKey, token)
  2. }
复制代码
此时我还没故意识到cookie只能在同源的域名下共享，然后断点到路由守卫js，发现走的case还是没有获取到token，这是我才意识到问题所在，将Cookies改成了sessionStorage。之后问题就办理了。
  1. export function setToken(token) {  return Cookies.set(TokenKey, token)
  2. }
复制代码
换成
  1. export function setToken(token) {
  2.   return sessionStorage.setItem(TokenKey, 'token)
  3. }
复制代码
总结

sessionStorage：仅在同一窗口或标签页中共享，不同窗口或标签页之间不共享。
Cookies：在同一域名下的所有窗口和标签页之间共享

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 qidao123.com技术社区-IT企服评测·应用市场 (https://dis.qidao123.com/) Powered by Discuz! X3.4