无感刷新Token自己的处理方式

JWT是全称是JSON WEB TOKEN，是一个开放标准，用于将各方数据信息作为JSON格式进行对象传递，可以对数据进行可选的数字加密，可使用RSA或ECDSA进行公钥/私钥签名。

JWT最常见的使用场景就是缓存当前用户登录信息，当用户登录成功之后，拿到JWT，之后用户的每一个请求在请求头携带上Authorization字段来辨别区分请求的用户信息。且不需要额外的资源开销。

比起传统的session认证方案，为了让服务器能识别是哪一个用户发过来的请求，都需要在服务器上保存一份用户的登录信息（通常保存在内存中），再与浏览器的cookie打交道。

JWT为三个部分组成，分别是Header，Payload，Signature，使用.符号分隔。

标头是一个JSON对象，由两个部分组成，分别是令牌是类型（JWT）和签名算法（SHA256，RSA）

负荷部分也是一个JSON对象，用于存放需要传递的数据，例如用户的信息

此外，JWT规定了7个可选官方字段（建议）

这一部分，是由前面两个部分的签名，防止数据被篡改。 在服务器中指定一个密钥，使用标头中指定的签名算法，按照下面的公式生成这签名数据

在拿到签名数据之后，把这三个部分的数据拼接起来，每个部分中间使用.来分隔。这样子我们就生成出一个了JWT数据了，接下来返回给客户端储存起来。而且客户端在发起请求时，携带这个JWT在请求头中的Authorization字段，服务器通过解密的方式即可识别出对应的用户信息。

refreshToken是Oauth2认证中的一个概念，和accessToken一起生成出来的。

当用户携带的这个accessToken过期时，用户就需要在重新获取新的accessToken，而refreshToken就用来重新获取新的accessToken的凭证。

当你第一次接触的时候，你有没有一个这样子的疑惑，为什么需要refreshToken这个东西，而不是服务器端给一个期限较长甚至永久性的accessToken呢？

抱着这个疑惑我在网上搜寻了一番，

其实这个accessToken的使用期限有点像我们生活中的入住酒店，当我们在入住酒店时，会出示我们的身份证明来登记获取房卡，此时房卡相当于accessToken，可以访问对应的房间，当你的房卡过期之后就无法再开启房门了，此时就需要再到前台更新一下房卡，才能正常进入，这个过程也就相当于refreshToken。

accessToken使用率相比refreshToken频繁很多，如果按上面所说如果accessToken给定一个较长的有效时间，就会出现不可控的权限泄露风险。

总体来说有了refreshToken可以降低accessToken被盗的风险

在用户登录应用后，服务器会返回一组数据，其中就包含了accessToken和refreshToken，每个accessToken都有一个固定的有效期，如果携带一个过期的token向服务器请求时，服务器会返回401的状态码来告诉用户此token过期了，此时就需要用到登录时返回的refreshToken调用刷新Token的接口（Refresh）来更新下新的token再发送请求即可。

axios作为最热门的http请求库之一，我们本篇文章就借助它的错误响应来实现token无感刷新功能。

本次基于axios-bz代码片段封装响应 可直接配置到你的项目中使用 ✈️ ✈️

利用interceptors.response，在业务代码获取到接口数据之前进行状态码401判断当前携带的accessToken是否失效。 下面是关于interceptors.response中异常阶段处理内容。当响应码为401时，响应会走中第二个回调函数onRejected

下面代码分段可能会让大家阅读起来不是很顺畅，我直接把整份代码贴在下面，且每一段代码之间都添加了对应的注释

把上面关于调用刷新token的代码抽离成一个refreshToken函数，单独处理这一情况，这样子做有利于提高代码的可读性和维护性，且让看上去代码不是很臃肿

经过上面的逻辑抽离，现在看下中的代码就很简洁了，后续如果要调整相关逻辑直接在refreshToken.ts文件中调整即可。

from https://juejin.cn/post/7170278285274775560