vue 前端用iframe实现单点登录两个不同域名Vue项目相互跳转并且传递Token

原创已于 2024-06-25 11:46:03 修改 · 1.9k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-06-25 11:02:53 首次发布

什么是单点登录

单点登录，字面意思：仅点一次就可以登录。

在公司的业务系统中，往往会有多个系统，并且这几个系统对应的都是同一个登录接口。次次登录对于公司用户体验肯定是不好的，对于后端上请求登录接口的频率也会增多。所以就有了这个单点登录：多个系统使用同一个登录接口，只需要登录一次就可以使得多个系统免登进入。

A网页：

 data: function() {
        return {         
            qdmDdUrl: 'http://127.0.0.1:8081/#/Loginst?dd=1',
            Isdddl: false

        };
    },



Jumpshuangd() {
            var that = this;
            this.Isdddl = true;
            var token = '',  username = 'AAA', password = 'BBB';
            axios
                .ajax({
                    url: 'xxxxxxxxxx',
                    method: 'post',
                    isShowLoading: false,
                    data: {
                        username: username,
                        password: password,                   
                    }
                }).then(res => {
                token = res.data.access_token;             
                const iframe = document.createElement('iframe');
                //设置iframe样式，使其不可见
                iframe.setAttribute(
                    'style',
                    'position:absolute;width:10px;height:10px;left:-20px;top:-20px;'
                );
                iframe.setAttribute(
                    'allow',
                    'payment'
                );
                //将iframe地址改为目标系统
                iframe.src = this.qdmDdUrl;
                document.body.append(iframe);
                iframe.onload = () => {
                    iframe.contentWindow.postMessage(
                        { token: token, name: username },//可以以对象形式传参，也可以直接传字符串"aaa"
                        that.qdmDdUrl//嵌入页面的路径,也可以直接传"*"
                    );
                    setTimeout(function() {
                        iframe.remove();
                    }, 5000);
                    // //新开页签，跳转到目标系统地址
                    setTimeout(function() {
                        that.Isdddl = false;
                        window.open('http://127.0.0.1:8081/#/dashboard', '_blank');
                    }, 2000);
                };
            });
        }

需要实现免登录的子系统，可在index.html中添加：

created() {
        let that=this;
        // 父页面发送的消息
        let dd = this.$route.query.dd;
        if (dd == 1) {
            window.parent.postMessage('childLoaded', '*');
            window.addEventListener('message',e => {
                const origin = [
                    'http://http://127.0.0.1:8081',
                    'http://http://127.0.0.1:8080',
                     .....
                ]
                if(origin.includes(event.origin)){
                      if (e.data.type == undefined) {                     
                        
                        window.localStorage.setItem('cookie', event.data.tooken)          
                      }
                }
            })
        }
    },