react 中401问题-整体说明 实现无感刷新

401错误的场景

1. 未登陆用户做一些需要权限才能做的操作（例如：关注作者），代码会报出401错误。这种情况下，应该让用户回到登陆页。

2. 登录用户的token过期了

整体目标是：通过axios响应拦截器来处理401问题。

refresh_token和token的作用

• token:

  • 作用：在访问一些接口时，需要传入token，就是它。

  • 有效期：2小时（安全）。

• refresh_token

  • 作用: 当token的有效期过了之后，可以使用它去请求一个特殊接口（这个接口也是后端指定的，明确需要传入refresh_token），并返回一个新的token回来（有效期还是2小时），以替换过期的那个token。

  • 有效期：14天。（最理想的情况下，一次登陆可以持续14天。）

401问题-思路-响应拦截器

axios中提供了响应拦截器功能：所有从后端回来的响应都会集中进入响应拦截器中。所以，我们可以在响应拦截器中去写代码来统一解决。

 由于这里涉及到非组件内路由跳转，所以需要提前封装独立的history 这里可以看我