• 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
            }
        },
  • 相关阅读:
    webpack--------类似gulp的工具,在gulp后面出来的
    canvas 绘制矩形
    HTML5 Canvas基础知识
    视差滚动效果
    闭包的理解
    AJAX 跨域
    json与jsonp的区别
    针对AJAX与JSONP的异同
    如何使用JSONP
    JSONP的客户端的具体实现
  • 原文地址:https://www.cnblogs.com/janney/p/9914198.html
Copyright © 2020-2023  润新知