“浙里办“项目单点登录、埋点、二次回退的问题__Vue.js__前端

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

刚接到这个项目的开始，我还觉得自己一定能很出色的完成这个任务。刚过了几天我就发现事情并不是我想象的那么简单，我要做的事情比我想象的要多好几倍。对于一个没有经验的负责人来说，这无疑是一个坑，当然也是一个挑战。这个项目的难点并不在于它的代码有多难，也不在于业务逻辑有多复杂，而是他的规范太多，审核太严格。这是一个什么样的项目呢？

大家可以看一看语雀《“浙里办”h5微应用接入流程》这篇文档。

接下来我将针对大多数人以及我个人遇到的一些问题做本篇文章的核心讲解：

1.单点登录，首先分为个人用户的单点登录和法人用户的单点登录：个人单点登录分为app登录和支付宝小程序登录：首先我们要判断当前环境是app环境还是支付宝小程序环境，然后跳转到不同的路径，个人用户登录我们采用的是直接跳转到前端页面，登录成功后会携带ticket等参数跳转到我们提供的路径，

 const sUserAgent = window.navigator.userAgent.toLowerCase();
      const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APP
      const bIsAlipayMini =
        sUserAgent.indexOf("miniprogram") > -1 &&
        sUserAgent.indexOf("alipay") > -1;
      if (bIsAlipayMini) {
        window.location.href =
          "https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&scope=1&servicecode="接入码"&go=https://mapi.zjzwfw.gov.cn/web/***/index.html?debug=true";
      } else {
        window.location.href =
          "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode="接入码"&go=https://mapi.zjzwfw.gov.cn/web/***/index.html?debug=true";
      }

法人的单点登录（app和小程序是一样的）：由于法人登录跳转到页面时，用的是post请求访问，但是web页面只能通过get访问，所以法人登录我们采用的方法是将提供的跳转路径为后台服务地址，后台服务将登录成功后通过get方式重定向到前端页面并携带前端需要的参数，

window.location.href ="http://essotest.zjzwfw.gov.cn/opensso/spsaehandler/metaAlias/sp?spappurl=http://192.168.8.37:8081/login?goto=https://mapi.zjzwfw.gov.cn/web/mgop/***/index.html?debug=true";

2.二次回退的问题：我发现大多数人都遇到了二次回退的问题，有很多人解决了二次回退的问题后又出现了其它各种奇奇怪怪的问题，以下是我们解决这个问题的办法： window.performance.navigation.type包含三个值： 0 : TYPE_NAVIGATE (用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式) 1 : TYPE_RELOAD (用户通过刷新，包括JS调用刷新接口等方式访问页面) 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面) 首先还是判断是浙里办app还是支付宝小程序,根据不同的环境处理二次回退

 const sUserAgent = window.navigator.userAgent.toLowerCase();
    const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // 浙里办APP
    const bIsAlipayMini =
      sUserAgent.indexOf("miniprogram") > -1 &&
      sUserAgent.indexOf("alipay") > -1;
    if (bIsDtDreamApp) {
      that.watchApp();
    } else if (bIsAlipayMini) {
      that.watchApply();
    }

解决app的二次回退问题，这个地方的逻辑是监听页面的跳转,判断当前页面是通过刷新或直接访问进入，还是通过返回进入。从而来判断是否是直接跳回app

   watchApp() {
      var that = this;
      window.addEventListener(
        "pageshow",
        function (event) {
          if (
            event.persisted ||
            (window.performance && window.performance.navigation.type == 2)
          ) {
            ZWJSBridge.close()//这个是浙里办内部的api，调用close()接口关闭通过openLink打开的页面
              .then((result) => {
                console.log(result);
              })
              .catch((error) => {
                console.log(error);
              });
          }
          that.isLoad();
        },
        false
      );
    },

解决支付宝小程序的二次回退问题，这个地方的逻辑是监听页面的跳转,判断当前页面是通过刷新或直接访问进入，还是通过返回进入。从而来判断是否是直接跳回浙里办小程序页面。

 watchApply() {
      var that = this;
      window.addEventListener(
        "pageshow",
        function (event) {
          if (
            event.persisted ||
            (window.performance &&
              (window.performance.navigation.type == 1 ||
                window.performance.navigation.type == 0))
          ) {
            that.isLoad();
          } else if (
            event.persisted ||
            (window.performance && window.performance.navigation.type == 2)
          ) {
            my.navigateBack();
          } else {
            my.navigateBack();//支付宝小程序的api，需在index.html引入，通过此api直接跳回浙里办小程序页面
          }
        },
        false
      );
    },

3.埋点，由于有些埋点是通过JSBridge API 获取的，而JSBridge API 的方法都是异步的，所以可能会存在埋点不成功的问题。：埋点主要是采集应用app的信息,日志，用户信息和地理位置等信息 web 端通用采集 SDK：https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085 使用vue开发的，这一段要写在埋点页面的script里面，尽量不要放在vue实例中，也不要放在index.html中，否则可能会存在埋点不成功的问题

  <script> (function(w, d, s, q, i) { w[q] = w[q] || [];
 var f = d.getElementsByTagName(s)[0],j = d.createElement(s);
 j.async = true;
 j.id = 'beacon-aplus';
 j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085'; 
f.parentNode.insertBefore(j, f); })(window, document, 'script', 'aplus_queue'); 

aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] }); 
aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] }); 

aplus_queue.push({ action: 'aplus.setMetaInfo',
arguments: ['appId', '60506758'] }); </script>