编程知识 cdmana.com

Vue project, two domain names for the same site, to solve the cross domain login problem (Vue + ifram + PostMessage)

Project requirements :
One project, two domain names, of which a.com domain name , Nested b.com domain name
When entering b The page should be switched to b.com domain name , At the same time, it needs to be kept in a Login status under domain name

solve : Use ifram + postMessage

The main page a domain name

a Under the domain name to negotiate ifram label

 <iframe id="child" ref="iframBox" src="http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334"></iframe>

a.com Under domain name , Click on Button Button jump B page (b.com domain name )

// Click event 
    videomediate () {
      document.getElementById('child')
        .contentWindow.postMessage({ meg: ' This is message', handleType: 'loginIfram', id: 666 },
          "http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334")
    },

main.js
Because the page jumps first main.js , So I'll log in first when I get the message

When I get the message, I jump to the page In this way, the cross domain login problem can be solved when the page is redirected

window.addEventListener('message', function (e) {
    if (e.data.handleType == 'loginIfram') {
        var newWindow = window.open();  // Make a statement in advance so as to prevent Google from directly opening the web page 
        //  Log in again 
        login({
            password: '123456',
            username: '15056382531',
        }).then(res => {
            console.log(' The current login is successful ');
            newWindow.location.href = 'http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334';
        })
    }
})

版权声明
本文为[That year]所创,转载请带上原文链接,感谢

Scroll to Top