zoukankan      html  css  js  c++  java
  • 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
            }
        },
  • 相关阅读:
    vsphere中虚机的cpu热插拔和内存热添加
    vsphere storage appliance工作原理和实施
    vmware产品框架-计算中心,5.1更新等
    vcenter建立cluster
    vcenter 5.1安装亲历
    openfiler在esxi下的安装配置
    升级华为s2016
    ubuntu下配置华为交换机s2016
    Fibre Channel address weaknesses
    vsphere HA内幕变化
  • 原文地址:https://www.cnblogs.com/janney/p/9914198.html
Copyright © 2011-2022 走看看