你没见过的狗血需求 gis 和 vuecli 的公用

我感觉这个"你没见过的狗血需求"我可以出一个专题 你永远不知道你接到的需求是什么他们到底在想什么....

• 需求 :使用jeecg的前端cli项目的页面在arcgis的项目中使用
  首先是登录页 写过gis的朋友都知道 地图服务都是基于apphbulider for gis 没有登录页所以,...就提出了吧cli的登录页放到gis上去（我nm 支付宝调用微信支付？）吐槽归吐槽 做还是得做啊
• 设计
  首先想到的是ifarme 进入的时候加载同域名下的页面也是可以的例如： RJHZZUT@38TH{ACEFACH8%U.png
  YMV3(964%NQHH9YAOUG_4%T.png
  具体做了什么呢？ 其实很简单 cli的大型项目都会vuex 在得到用户信息和需要渲染的列表后会将值存入store中 当然 在gis中是原生的html项目 没有vue对象的 而且这个项目还是要照顾到ie9(ie 咋还不移除) 我们只能从localstorage中取出它登录的token（因为在同一个域下）。在cli项目中存入token的时候给我们的页面一个回调 iframe对象调用父级方法，这样我们就知道已经登录了
• 普通项目的设置

//设置一个方法用于登录后的回调
    function setToken() {
        //拿到后就刷新    
              location.reload();
        }
      setHeaderAndSetiframeSrc(true)
//设置一个方法控制界面显隐（没登录肯定不能展示gis的页面的一丁点东西）
        function setHeaderAndSetiframeSrc(flag) {
            // true 设置头部显示 iframe 设置src为空释放内存
            if (flag) {
                $(".header").css('display', 'block');
                $('#myFrame1').attr('src', 'about:blank');
                $('.system-fcs').css({
                    top: "80px",
                    display: 'none'
                });
            } else {
                $(".header").css('display', 'none');
                $('#myFrame1').attr('src', '/user/login?from=mapserver');
                $('.system-fcs').css({
                    top: "0",
                    display: 'block'
                });
            }
        }

//之后就要获取登录状态了 登录状态就看有没有token（在请求的时候调用）
    function getToken() {
            return localStorage.getItem("pro__Access-Token") ? JSON.parse(localStorage.getItem("pro__Access-Token")) : "";
        }

后台接口每次请求都要带上token 所以我们要写一个公用方法请求

        //防止一直因为访问失败一直刷新
        var num = 0;
        // 自定义ajax
        window.$ajax = function(url, type, data, cb, contentType) {
            if (contentType) {
                contentType = "application/json";
            } else {
                contentType = "application/x-www-form-urlencoded";
            }
//是否有token
            if (!getToken().value) {
                if (num > 0) {
                    return;
                }
                num = 1;
//重新登录
                setHeaderAndSetiframeSrc(false)
                return
            }
            $.ajax({
                url: url,
                type: type,
                data: data,
                contentType: contentType,
                headers: {
                    "X-Access-Token": getToken().value //此处放置请求到的用户token
                },
                success: function(res) {
                    cb(res)
                },
                error: function(err) {
                    // 请求接口时 没有token 或者token失效 
                    if (err.status == 500 || err.status == 502) {
                        // 登录
                        setHeaderAndSetiframeSrc(false);
                    }
                    console.log('err', err);
                }
            });
        }

那么到这里 我们就完成了连个系统的关联（不要搞我...）