window.name 实现跨域

window对象有一个name属性,该属性有一个特征:即在一个窗口的生命周期内,窗口载入的所有的页面都是共享一个window.name的,每一个页面对window.name都有读写的权限,window.name是持久的存在于一个窗口载入的所有页面中的,并不会因为新的页面的载入而被重置。

下面用项目中遇到的实例,讲解如何用window.name实现跨域获取数据。

项目需求:网站A与网站B互相跳转,如用户在网站A中已登录,跳转到网站B时也要是已登录状态。

第一步、在网站A点击跳转地方,设置window.name

<a :href="sbUrl" @click="jump">申报</a>

  

mounted() {
        if (location.hostname == 'localhost') this.sbUrl = 'http://localhost:8080/#/';  //项目有分本地环境、测试环境、UAT环境、正式环境,因此跳转的路径要分情况处理
        else if (location.hostname == 'uatevaluate.bysxzx.com') this.sbUrl = 'http://uattest.bysxzx.com/#/';
        else if (location.hostname == 'devtest.bysxzx.com') this.sbUrl = 'http://devtest.bysxzx.com/#/';
        else if (location.hostname == 'evaluate.bysxzx.com') this.sbUrl = 'http://bysxzx.com/#/';
},
methods:{
   jump(){
            window.name = '';
            if (!localStorage.getItem('token')) { //token获取得到,说明已登录
                window.name = 'logout';
           } else {
                window.name = JSON.stringify({
                    userId: localStorage.getItem('userId'),
                    token:localStorage.getItem('token'),
                    userType:localStorage.getItem('userType'),
                    userData:localStorage.getItem('userData'),
                    userInfo:localStorage.getItem('userInfo'),
                    oldHref:localStorage.getItem('oldHref'),
                    href:location.href});
                localStorage.removeItem('oldHref');
            }
        },         
}    

第二步:在网站B中获取window.name

mounted: function(){
        if (window.name.length > 10) {   //如果window.name获取得到,就说明该页面是跨域过来的
            let udata = JSON.parse(window.name);
            localStorage.setItem('userId', udata.userId);   //项目需求是,如果已登录状态之间的跳转,需要把用户信息传递过去。因此要把用户数据提取后存到localStorage,使跳转后的网站登录接口能获取到相关的数据,实现无缝登录
            localStorage.setItem('token', udata.token);
            localStorage.setItem('userType', udata.userType);
            localStorage.setItem('userData', udata.userData);
            localStorage.setItem('userInfo', udata.userInfo);
            this.isLogin = true;  //控制html中登录按钮是否出现,true:不出现
            window.name = "";     //把window.name清空
            if (udata.oldHref) location.assign(udata.oldHref);
            localStorage.setItem('oldHref', udata.href);
        }
        if(localStorage.getItem('token')){  //以下两种情况与跨域无关
            this.isLogin = true
            this.getUserInfo(localStorage.getItem('userId'))
        } else {
            this.isLogin = false
        }
    },

 

posted @ 2018-11-06 11:16  灵哆哆  阅读(849)  评论(0编辑  收藏  举报