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

背景

最近使用uni-app开发项目时遇到了一个bug，需求是需要在两个平台之间切换，A平台登录后要选择身份，选完后带着token进入另外一个平台B的个人空间，点击个人空间顶部的个人信息区域又可以切换到A平台的身份选择。
这样子就产生了一个问题，点击身份的时候会生成新的token，但是页面是允许返回的所以url地址栏中的历史token还在，所以就会基于这个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。分别对应三个枚举值:

• 0 : TYPE_NAVIGATE
  • Navigation where the history handling behavior is set to “default” or “replace”.(用户通过常规导航方式访问页面，比如点一个链接，或者一般的get方式)
• 1 : TYPE_RELOAD
  • Navigation where the history handling behavior is set to “reload”.(用户通过刷新，包括JS调用刷新接口等方式访问页面)
• 2 : TYPE_BACK_FORWARD
  • Navigation where the history handling behavior is set to “entry update”.(用户通过后退按钮访问本页面)
• 255 : TYPE_RESERVED
  • Any navigation types not defined by values above.(上面的值未定义的任何导航类型)
• type
  • This attribute must return the type of the last non-redirect navigation in the current browsing context. It must have one of the following navigation type values.

  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伪指令的客户端重定向，在本规范中不视为HTTP重定向。在这些情况下，该type 属性应返回适当的值，例如 TYPE_RELOAD重新加载当前页面或 TYPE_NAVIGATE导航到新URL)

• redirectCount
  • This attribute must return the number of redirects since the last non-redirect navigation under the current browsing context. If there is no redirect or there is any redirect that is not from the same origin as the destination document, this attribute must return zero.
• toJSON()
  • Runs [WEBIDL]'s default toJSON operation.

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

适用场景

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

参考资料

• the-performancenavigation-interface：