routeNrequest

文章目录

1. Route intercept
   1. 场景
      1. 情况 1
      2. 情况 2

Route intercept

这里只是想记录一下对 401 的请求拦截与路由拦截区别，之前一直觉得在请求拦截 401 与用户未登录状态即可，最近发现在路由侧也加上未登录校验，可以提前跳转到登录页，同时不会再浏览器历史记录中添加上需要登录的页面路由，可以方便用户使用浏览器的回退功能回到上一页。

最近遇到这个场景后，我觉得两边都加上是必要的。

场景

在一个类电商网站首页，存在几个推荐商品，它们上面有收藏与加购按钮，同时页面顶部导航存在跳转到收藏列表与购物车列表的按钮，并且首页是不需要鉴权的。

先假设不在路由层做登录态校验。

情况 1

当操作商品的收藏与加购按钮时，未登录下会发生 401 请求，同时跳转到登录页，并带上重定向的参数。

此时用户操作回退，可以正常回到首页。

情况 2

当操作商品的收藏列表与购物车列表按钮时，未登录下会发生 401 请求，同时跳转到登录页，并带上重定向的参数。

此时用户操作回退，无法回到首页，因为已经跳转到了对应的列表页面，需要权限，只要回退了，就会回到需要权限的页面，之后又会发起 401 请求自动跳转到登录页。

情况 2 就是对路由做权限的一个很大区别，看是否需要这个针对用户友好的体验吧。

另外如果对路由做登录校验，可以在发起请求前就跳转到登录页，可以减少等待时间，也可以减少请求次数，同时体验上更丝滑，无需任何等待就到了下一页。