下面前端入门建站教程为大家介绍一下“浙里办“项目之浅谈单点登录、二次回退及埋

大家可以看一看语雀《“浙里办”h5微应用接入流程》这篇文档，链接：https://odynww.yuque.com/docs/share/525e3e8a-ad52-421b-90da-2d76808e3050#0THkj。

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

1、单点登录，首先分为个人用户的单点登录和法人用户的单点登录：

个人单点登录分为app登录和支付宝小程序登录：

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

代码如下：

isLoad() {
 if (
   this.api.ticket == undefined ||
   this.api.ticket == null ||
   this.api.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=wlsw&go=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001812737/reserved/index.html";
   } else {
     window.location.href =
       "https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=wlsw&go=https://mapi.zjzwfw.gov.cn/web/mgop/gov-open/zj/2001812737/reserved/index.html";
   }
 }
}

法人的单点登录（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中，否则可能会存在埋点不成功的问题

代码如下：

 (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'] }); 

上面是““浙里办“项目之浅谈单点登录、二次回退及埋”的全面内容，想了解更多关于 js 文章，请继续关注前端入门建站教程。