实现无感刷新Token技术：.Net Web API与axios的完美结合
实现无感刷新Token技术：.Net Web API与axios的完美结合
在前后端分离的开发模式下，如何实现无感刷新Token是一个常见的技术需求。本文将详细介绍如何在.Net Web API和axios环境下实现双token机制，包括后台登录接口、刷新token接口、前端登录功能、错误响应拦截器等关键环节。
我们都知道Token是有设置有效期的，为了安全都不会设置过长的有效期；但设置有效期太短，又会导致经常需要重新登录。这就需要无感刷新Token的方案，来提升用户体验。
目前比较常用的方案是：双token机制。
- 登录时同时返回：Token、RefreshToken，Token用于请求业务接口，RefreshToken用于刷新Token接口；
- 每一次Http请求，客户端都会判断服务器返回状态，如果是401，代表Token过期；
- 客户端使用RefreshToken，请求服务器Token刷新接口，并获取新的：Token，RefreshToken；
- 如果第3步骤成功返回，更新本地的Token、RefreshToken；如果返回失败，代表RefreshToken也过期了，提示过期并跳转至登录页面。
下面我们一起看下实现步骤：
1. 后台登录接口
登录验证，验证用户名和密码，验证通过返回Token。
登录接口返回的2个内容：Token和RefreshToken，这两个有效期不一样，比如Token有效期是30分钟，RefreshToken有效期是60分钟。****
2. 后台刷新token接口
和登录接口一样，也是返回：Token和RefreshToken。
3. 前端登录功能
在前端登录页面，成功登录后，把Token和RefreshToken存储在本地，可以存储在Cookie或者LocalStorage。
4. 错误响应拦截器
axios响应拦截器添加如下代码：
a. 判断Http返回状态是否为401。
b. 判断是否授权信息是否使用refreshToken，调用刷新token接口，同样也会发起Http请求，如果refreshToken也过期了，同样会返回401;所以这边要加判断，避免进入死循环。
c. 如果refreshToken也过期了，直接跳转至登录页面。
d. 如果调用刷新token接口成功返回，更新本地存储的Token、RefreshToken；并获取上一次业务请求的内容，并更新验证信息，重新发起上一次业务请求，这样才能实现无感刷新。
5. 实现效果
最终实现效果如下：
- 请求用户列表接口，返回401；
- 调用token刷新接口；
- 重新请求用户列表接口。
在这过程中，第一次发起用户搜索请求是失败的，我们马上刷新token，并重新发起第二次用户搜索请求，但对用户来说是透明、毫无察觉的。
本文来自博客园，作者firespeed