无感刷新token（vue）

为提高用户体验，不用频繁登录，就需要定期去刷新token。

无感刷新： 使用登录时保存的refresh_token调用另一个接口，换回新的token值，替换到本地，再

次完成本次未完成的请求（用户无感知）

token无感刷新的三种方案：

1.判断后端返回的token过期时间，快过期就调用刷新token接口。

缺点：本地时间判断，若本地时间被篡改，特别是本地时间比服务器时间慢时，拦截会失败。

2.写个定时器，然后定时刷新token接口。

缺点：浪费资源，消耗性能,不建议采用。

3.在请求响应拦截器中拦截，判断token 返回过期后，调用刷新token接口。

具体步骤：

1、首次登录的时候会获取到两个token， 一个是平时请求接口正常使用的token（过期时间短），

另一个是专门用于刷新的refresh_token（过期时间一般比较长），登陆时都存起来

localStorage.setItem(‘refresh_token’,xxx) localStorage.setItem(‘token’, xxx)

2、在响应拦截器中对401状态码引入刷新token的api方法调用

3、替换保存本地新的token

4、headers替换新的token

5、axios再次发起未完成的请求࿰