问题描述
有这么一个功能，上游系统通过iframe把我们系统的页面嵌入到他们页面内，于是我们需要提供一个链接，点击链接跳转到这个页面后，会去路由中获取用户信息，调接口进行登录操纵，获取token信息返回给当前页面，并将token信息缓存起来，后续哀求时带上一个token就可以了，在功能实现后，在欣赏器上面粘贴我们的地址就可以登录进去，本以为万事大吉，然后看看是否有跨域的问题，趁便就测试了一下在nginx的情况下，是否可以或许正常登录。
- http://10.0.0.1:8081/#/ssoLogin?code=xxx
- <!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
- "></iframe></body></html>
办理方案
先上答案，感爱好在往下看吧
我们使用的缓存token的方式是cokkie，
- Cookies.set(TokenKey, token)
后改成sessionStorage，问题办理。
sessionStorage：仅在同一窗口或标签页中共享，不同窗口或标签页之间不共享。
Cookies：在同一域名下的所有窗口和标签页之间共享
- Chrome欣赏器
- VUE + Element前端页面
- Nginx
排查过程
1. 猜疑是X-Frame-Options
由于之前遇到过iframe嵌入页面时，若被嵌入页面的nginx有安全限制，则无法被iframe。所以我第一时间就往这里想了，而且之前的时候是明确有这个报错信息的，这次在控制台却没有看到任何保持信息。
在nginx中参加下面的配置，发现无事发生。
- add_header X-Frame-Options ALLOWALL;
实在从开始我就应该想到不是这个缘故因由，因为欣赏器还能跳转到登录页面，并且控制台没有报错日志。
2. 猜疑是Nginx配置问题导致的跨域
奇怪的是，并没有看到控制台跨域的报错，只能排撤除了
3. 猜疑是代码问题
这次我重新开始了断点调试，起首在ssoLogin页面，加载时会实行获取token方法
- openFullScreen2() {
- const loading = this.$loading({
- lock: true,
- text: 'Loading',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
- this.$store
- .dispatch('user/ssoLogin', this.loginForm)
- .then(() => {
- this.$router.push({ path: '/loginSuccess' })
- loading.close()
- })
- .catch(() => {
- loading.close()
- })
- }
- ssoLogin({ commit }, userInfo) {
- const { code } = userInfo
- return new Promise((resolve, reject) => {
- ssoLogin({ code: code }).then(response => {
- const { data } = response
- commit('SET_TOKEN', data.tokenType + ' ' + data.token)
- setToken(data.tokenType + ' ' + data.token)
- const userInfo = data.userId
- commit('SET_USER_INFO', userInfo)
- resolve()
- }).catch(error => {
- reject(error)
- })
- })
- },
- export function setToken(token) { return Cookies.set(TokenKey, token)
- }
- export function setToken(token) { return Cookies.set(TokenKey, token)
- }
- export function setToken(token) {
- return sessionStorage.setItem(TokenKey, 'token)
- }
sessionStorage：仅在同一窗口或标签页中共享，不同窗口或标签页之间不共享。
Cookies：在同一域名下的所有窗口和标签页之间共享
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
