js判断页面是否是通过浏览器后退按钮返回打开的

背景

最近使用uni-app开发项目时遇到了一个bug，需求是需要在两个平台之间切换，A平台登录后要选择身份，选完后带着token进入另外一个平台B的个人空间，点击个人空间顶部的个人信息区域又可以切换到A平台的身份选择。

这样子就产生了一个问题，点击身份的时候会生成新的token，但是页面是允许返回的所以url地址栏中的历史token还在js判断是后退进入页面，所以就会基于这个token触发请求导致接口报了Token验证失败的错误，一番搜索之后终于找到了解决办法。

解决方法

利用浏览器的window.performance.navigation.type属性

window.performance.navigation.type

window.performance是W3C性能小组引入的新的API，目前IE9以上的浏览器都支持。

我们可以在官方说明中找到PerformanceNavigation接口的详细介绍：

[Exposed=Window]
interface PerformanceNavigation {
  const unsigned short TYPE_NAVIGATE = 0;
  const unsigned short TYPE_RELOAD = 1;
  const unsigned short TYPE_BACK_FORWARD = 2;
  const unsigned short TYPE_RESERVED = 255;
  readonly attribute unsigned short type;
  readonly attribute unsigned short redirectCount;
  [Default] object toJSON();
};

type 属性返回值为0,1,2。分别对应三个枚举值:

1 : TYPE_RELOAD 2 : TYPE_BACK_FORWARD 255 : TYPE_RESERVED type

NOTE

Client-side redirects, such as those using the Refresh pragma directive, are not considered HTTP redirects by this spec. In those cases, the type attribute should return appropriate value, such as TYPE_RELOAD if reloading the current page, or TYPE_NAVIGATE if navigating to a new URL.(客户端重定向，例如使用Refresh pragma伪指令的客户端重定向js判断是后退进入页面，在本规范中不视为HTTP重定向。在这些情况下，该type 属性应返回适当的值，例如 TYPE_RELOAD重新加载当前页面或 TYPE_NAVIGATE导航到新URL)

redirectCount toJSON()

所以我们只要判断type属性为2时就可以知道页面是通过返回按钮打开的了，然后开头的问题就可以据此加判断来解决token异常了。

适用场景

如果在做基于vue等框架开发的前端项目、uni-app来开发h5相关项目时都可以参考上述方法去实现功能

参考资料