首页 > 其他分享 >实现无感刷新Token技术:.Net Web API与axios的完美结合

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

时间:2024-11-11 11:21:12浏览次数:1  
标签:Web axios RefreshToken 登录 token 接口 Token 刷新 无感

这是我之前分享在星球里面的课程,下面整理下,分享下这个无感刷新Token技术方案。

图片

我们都知道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,加入.Net交流群。

图片

- End -

标签:Web,axios,RefreshToken,登录,token,接口,Token,刷新,无感
From: https://www.cnblogs.com/chingho/p/18003760

相关文章

  • WebSocket通信
    WebSocket通信WebSocket是一种全双工的通信协议,它允许在客户端和服务器之间建立持久的双向通信通道。与传统的HTTP协议不同,WebSocket允许客户端和服务器之间实时传递数据,而无需频繁建立连接,从而减少了通信的开销和延迟。WebSocket的特点:全双工通信:WebSocket连接建立后,客......
  • javaweb关于中文乱码问题
    javaweb文件中中文乱码问题除了好多次,总是解决不完,现在总结一下处理中文乱码的方法:客户端发送的数据编码问题:确保客户端(如浏览器)发送的数据确实是UTF-8编码的。您可以在浏览器的开发者工具中检查请求头中的Content-Type字段,确保它包含charset=UTF-8。服务器配置问题:检查......
  • [CISCN2019 华北赛区 Day2 Web1]Hack World
    题目链接:[CISCN2019华北赛区Day2Web1]HackWorld。打开环境后如下所示。尝试输入1、2、3、4、...,发现仅存在三种结果。即1时,输出"Hello,glzjinwantsagirlfriend."。2时,输出"Doyouwanttobemygirlfriend?"。其他,输出"ErrorOccuredWhenFetchResult."。......
  • BuildCTF-web 刮刮乐(wp)
    进入环境F12查看发现可以利用cmd传参我们传个flag得到回显然后伪造接着没回显了最终构造出tac+/flag tee+1.txt;sleep+5利用反向读取/flag的内容写道指定的1.txt文件中然后暂停5秒,回显了flag......
  • Pyhthon实时行情接口WebSocket接入
    Python做量化,如果是日内策略,需要更实时的行情数据,不然策略滑点太大,容易跑偏结果。之前用行情网站提供的level1行情接口,实测平均更新延迟达到了6秒,超过10只股票并发请求频率过快很容易封IP。后面又尝试了买代理IP来请求,成本太高而且不稳定。在Github上看到一个可转债的Golang高频......
  • 备赛web蓝桥杯①
    数组常用函数//1.find()constarry1=[5,12,8,130,44];constfound=arry1.find(a=>a>10);//这一行使用了find方法,它是JavaScript数组对象的一个方法,用于找出第一个满足提供的测试函数的元素。//find()的箭头函数:变量名=>......
  • JavaWeb:文件上传2
    欢迎来到“雪碧聊技术”CSDN博客!在这里,您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者,还是具有一定经验的开发者,相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导,我将不断探索Java的深邃世界,分享最新的技术动态、实战经验以及项目......
  • Web前端开发--HTML语言
    文章目录前言1.介绍2.组成3.基本框架4.常见标签4.1双标签4.1.1.标题标签4.2.2段落标签4.1.3文本格式化标签4.1.4超链接标签4.1.5视频标签4.1.6音频标签4.2单标签4.2.1换行标签和水平线标签4.2.2图像标签5.表单控件结语前言生活中处处都有网站,无论你是学习爬虫,还......
  • 11.10 javaweb day3 表格,表单标签
    表格标签:定义表格整体,可以包裹多个,1.border:表格边框的宽度2.width:规定表格的宽度3.cellspacing:规定单元之间的空间:表格的行,可以包裹多个:单元格,表头单元格可以换成<body><tableborder="3px"cellspacing="2"width="600px"><tr><th>序号</th>......
  • [CISCN2019 华北赛区 Day2 Web1]Hack World 1
    [CISCN2019华北赛区Day2Web1]HackWorld1打开实例发现是个POST注入框盲猜SQL注入,万能密码检测无果,而且经过测试存在大量sql关键字过滤尝试使用(),出现了bool(false),确定这是一道布尔注入题and被禁用,决定采用异或^注入构建payload脚本梭哈:成功获得flag:flag{a2f7089......