单点登录-后台外链到用户端

1.单点登录介绍

大致是：单点登录(SingleSignOn，SSO)，就是通过用户的一次性鉴别登录。当用户在身份认证服务器上登录一次以后，即可获得访问单点登录系统中其他关联系统和应用软件的权限，同时这种实现是不需要管理员对用户的登录状态或其他信息进行修改的，这意味着在多个应用系统中，用户只需一次登录就可以访问所有相互信任的应用系统。这种方式减少了由登录产生的时间消耗，辅助了用户管理，是比较流行的.(定义来源于百度)。简述为：用户登录某个系统后，就获得了访问其他关联系统或应用软件的权限，这种方式叫做单点登录

2.单点登录实现背景：老板要求在后台系统上可以看到用户的h5页面，后端会根据我传递的用户id返回给我对应用户的token。

3.实现思路：现在后台点击按钮后弹窗，出现用户端-因为是链进一个网页所以我就想到了入门时候学的iframe标签，因为用户端的登陆有写只要本地存储token自动跳进去不用频繁登录，所以后台想的就是直接把token存本地，但是后来发现域名不一样读不到，然后百度了一下说是用postMessage方法，但是我没看懂，所以我就选择了另一种方法，直接url代参传过去，在h5那一段加一个链接代token的判断，还有一个坑就是iframe的url不变的话是不会重新加载的，是会有缓存的，然后就是我遇到的另一个坑，就是我一开始把iframe标签写在页面里的，我想我每次打开弹窗直接改变链接他就可以重新加载了，虽然它确实是重新加载了，但是开始查看前两个用户还可以，查看第三个用户的时候页面直接空白了，h5网页更本就不加载了，然后也不报错，就搞得我很蒙，后来问了公司的前端前辈，前辈让我每次打开弹窗的时候把iframe删掉重新建，我试了一下迅速解决，果然不得不服，哎，前辈说应该是vue对iframe不太兼容

4.单点登录代码：

 <div id="modeGuests">
<p></p>
</div>

        urlt.value = "https://.../#/?Id="+localStorage.getItem('Id')+'&token='+ data.res.token        //外链链接+参数token
        let modeGuests = document.getElementById('modeGuests')//拿到要插入iframe的父节点
        modeGuests.removeChild(modeGuests.firstChild)//删除父节点的第一个子节点，因为每次打开都会删除一次，所以只有一个节点
        var iframe = document.createElement("iframe");//创建iframe节点
        iframe.src = urlt.value;//链接赋值
        iframe.width = '375px'//样式复制
        iframe.height = '700px'
        iframe.style.margin = '0 auto'
        modeGuests.append(iframe);//把iframe这个子节点放到父节点里面