实现无感刷新Token技术：.Net Web API与axios的完美结合

🏆作者：科技、互联网行业优质创作者
🏆专注领域：.Net技术、软件架构、人工智能、数字化转型、DeveloperSharp、微服务、工业互联网、智能制造
🏆欢迎关注我（Net数字智慧化基地），里面有很多高价值技术文章，是你刻苦努力也积累不到的经验，能助你快速成长。升职+涨薪！！

我们都知道Token是有设置有效期的，为了安全都不会设置过长的有效期；但设置有效期太短，又会导致经常需要重新登录。

这就需要无感刷新Token的方案，来提升用户体验。

目前比较常用的方案是：双token机制。

1、登录时同时返回：Token、RefreshToken，Token用于请求业务接口，RefreshToken用于刷新Token接口；

2、每一次Http请求，客户端都会判断服务器返回状态，如果是401，代表Token过期；

3、客户端使用RefreshToken，请求服务器Token刷新接口，并获取新的：Token，RefreshToken；

4、如果第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、实现效果

最终实现效果如下：

1、请求用户列表接口，返回401；

2、调用token刷新接口；

3、重新请求用户列表接口。

在这过程中，第一次发起用户搜索请求是失败的，我们马上刷新token，并重新发起第二次用户搜索请求，但对用户来说是透明、毫无察觉的。

🏆欢迎关注我（Net数字智慧化基地），里面有很多高价值技术文章，是你刻苦努力也积累不到的经验，能助你升职+涨薪！！
🏆点击下方卡片关注公众号，里面有很多大佬的技术文章，能助你快速成长。还可免费领取如下15个视频教程！

回复'面试'，获取C#/.NET/.NET Core面试宝典

回复'C#'，领取零基础学习C#编程

回复'NET'，领取.NET零基础入门到实战

回复'Linux'，领取Linux从入门到精通

回复'wpf'，领取高薪热门【WPF上位机+工业互联网】从零手写实战

回复'Modbus'，领取初识C#+上位机Modbus通信

回复'PLC'，领取C#语言与西门子PLC的通信实操

回复'blazor'，领取blazor从入门到实战

回复'TypeScript'，领取前端热门TypeScript系统教程

回复'vue'，领取vue前端从入门到精通

回复'23P'，领取C#实现23种常见设计模式

回复'MongoDB'，领取MongoDB实战

回复'Trans'，领取分布式事务

回复'Lock'，领取分布式锁实践

回复'Docker'，领取微服务+Docker综合实战

回复'K8s'，领取K8s部署微服务

回复'加群'，进.NET技术社区交流群