vue 前端 用iframe实现单点登录_糖糖246的博客-CSDN博客

在监管系统登录以后，跳转A、B、C、D 系统可以实现免登录效果。

我们的项目打包后，默认地址一般都是重定向到首页，通过路由守卫验证登录信息是否有效，然后确定是打开首页，还是打开登录页，所以从父项目跳转到子项目不需要登录，就要做到子项目运行时，子项目的代码可以拿到代表子项目系统已经登录的验证信息token。

所以，前端要考虑的就是怎么把token从父项目带到子项目中。

父级域名相同情况（如：a.yuming.com, b.yuming.com）

 首先 在A、B、C、D系统确定下路由守卫的跳转规则，看下验证登录成功与否的信息 token 的保存位置，要 存到cookie 。切记不要存到sessionStorage和localStorage中，因为不同tab页有不同的sessionStorage，不用域名有不同localStorage，即使IP相同，端口号不同也会有不同的localStorage。

【路由守卫一般写在 a router文件夹的index.js文件中，有的会写到 b main.js中，还有的会写到一个单独的文件，与main.js同级的 c permission.js中。】

 然后 在“综合监管系统”中，给各个系统添加点击事件，在事件函数中，向各自的后台发起登录请求，返回结果后，将结果保存到上一步确定的位置，然后操纵浏览器跳转到各自系统即可。如果是各个系统用的同一token，则省掉登录获取token步骤。

【把token存到cookie中】：

npm install --save js-cookie

import Cookies from 'js-cookie'

Cookies.set('name111', 'value111', {  domain : '域名/IP' })

【新标签页跳转】

window.open('域名/IP')

这种情况，如果保存多个token值，要记得理清理顺每个系统token对应保存的key是什么。 

 完全独立域名 

此时上面那种方法无法解决问题，可以采用下面的方法，下面的方法也可以解决父级域名相同时的问题。

 通过url链接携带参数的方法解决问题。

 在“综合监管系统”中，给各个系统添加点击事件，在事件函数中，向各自的后台发起登录请求，返回结果后，将结果保存到上一步确定的位置，然后操纵浏览器跳转到各自系统即可。如果是各个系统用的同一token，则省掉登录获取token步骤。

在综合监管系统中：

let token = '*********'

window.open('http://www.baidu.com?token=' + token)

要跳转的系统中，找到路由守卫的位置，在 router.beforeEach函数 最上边添加以下代码即可：

let search = window.location.search
if(search && search.length>1){
   let arr = search.split('=')
   if (arr[0]==='?token') {
      let token = arr[1]
      setToken(token)    // 将token值按照子系统的方式保存下来，cookie或者localStorage均可
      window.location.href = window.location.origin
   }
} 

此方法中子系统保存token的方法请根据实际需要更改

------------------------------此处是分割线--------------------------------

希望能对小伙伴们有帮助。之前查资料看到有用<iframe>实现的，我是真的没学会怎么用。有兴趣的小伙伴也可以去尝试下。

---

终于，我自己也算研究了iframe怎么实现：

vue 前端 用iframe实现单点登录_糖糖246的博客-CSDN博客