你没见过的狗血需求 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);
                }
            });
        }

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

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

推荐阅读更多精彩内容