Web前端无痛刷新token

置顶 已于 2023-02-06 17:08:36 修改
阅读量185 收藏 1
点赞数 1
分类专栏： 技术类 文章标签： 前端框架 javascript Powered by 金山文档
于 2023-02-06 16:57:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72659914/article/details/128903669
版权
本文介绍了前端无痛刷新token的概念和作用，旨在防止因token过期导致的用户体验中断。通过引入相关文件，设置无痛刷新类型数组，并在请求响应拦截器中编写关键代码，实现了在token失效时自动获取新token，确保页面操作的连续性。
摘要由CSDN通过智能技术生成

无痛刷新概念：可以理解为当有token过期失效时, 可以重获取新的token。

无痛刷新的作用：在对页面进行增删改查等操作时，不会因为token值过期而跳转登录页面，让其页面的数据丢失，导致需重新进行操作，避免影响体验效果。

实现无痛刷新的步骤：

（1）引入需要用到的相关的文件：




                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  冰颖&
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    1
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    1
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
前端无痛刷新Token

				
			

			

				

					weixin__BJ050106的博客
				

				

					08-09
					
					186
					
				

			

		

		

			
				
这个需求场景很常见，几乎很多项目都会用上，之前项目也实现过，最近刚好有个项目要实现，重新梳理一番。

			
		

	



                

              
                



	

		

			

				
					
关于token无痛刷新的两个方案

				
			

			

				

					Yugoup的博客
				

				

					04-25
					
					2270
					
				

			

		

		

			
				
目录方案一方案二
方案一
思路：

后端需要返回一个token过期的时间，在请求发起前拦截每个请求，判断token的有效时间是否已经过期，如果已过期，则暂时将请求挂起，先刷新token后再继续请求。

前期思考：

返回过期时间是为了判断是否过期的，但是如果服务器时间和系统时间不一致呢？
如果同时发起多个请求时怎么办？

实现：
因为是在请求前进行拦截，所以这里用axios的axios.interceptors.request.use()方法
首先，关于服务器时间和系统时间不一致的问题，我的解决方法是：



			
		

	



                


  
              

                


	

		

			

				
					
axios如何利用promise无痛刷新token的实现方法

				
			

			

				

					12-08
				

			

		

		

			
				
需求

最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。

需求解析

当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshToken接口，拿到新的token后再继续执行之前的请求。
这个问题的难点在于：当同时发起多个请求，而刷新token的接口还没返回，此时其他请求该如何处理？接下来会循序渐进地分享一下整个过程。
实现思路

由于后端返回了token的有效时间，可以有两种方法：

方法一：
在请求发起前拦截每个请求，判断

			
		

	





	

		

			

				
					
手牵手带你实现无痛刷新token！什么，uniapp中还不会，那也手拉手带你实现一下吧

				
			

			

				

					weixin_44995391的博客
				

				

					06-05
					
					3665
					
				

			

		

		

			
				
手牵手带你实现无痛刷新token！什么，uniapp中还不会，那也手拉手带你实现一下吧

			
		

	



		

			
		



	

		

			

				
					
项目中前端如何实现无感刷新 token！

				
			

			

				

					CRMEB小程序商城的博客
				

				

					07-17
					
					1440
					
				

			

		

		

			
				
前一阵遇到了一个问题，线上平台有时会出现用户正在使用的时候，突然要用户去进行登录，这样会造成很不好的用户体验，但是当时一直没有好的思路因此搁置了下来；通过零散时间查询资料以及思考，最终解决了这个问题，接下来跟大家分享一下！

			
		

	





	

		

			

				
					
多个请求同时发起情况下的token无痛刷新

				
			

			

				

					qq_45324420的博客
				

				

					05-13
					
					815
					
				

			

		

		

			
				
token无痛刷新，token更新后收到401响应的请求重试

			
		

	





	

		

			

				
					
vue中前端利用refreshToken结合axios拦截器实现token的无感刷新

				
			

			

				

					01-16
				

			

		

		

			
				
内容概要： ...3、同时多个请求返回401，需要刷新token。  阅读建议：此资源以简单的demo演示了RefreshToken使用的全过程，介绍了基本的思路，所以在学习的过程要结合这些内容一起来实践，并调试对应的代码。

			
		

	





	

		

			

				
					
请求时token过期自动刷新token操作

				
			

			

				

					11-19
				

			

		

		

			
				
1.在开发过程中，我们都会接触到token，token的作用是什么呢？主要的作用就是为了安全，用户登陆时，服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token，证明其请求的合法性，服务器会验证token，只有通过验证才会返回请求结果。
2.当token失效时，现在的网站一般会做两种处理，一种是跳转到登陆页面让用户重新登陆获取新的token，另外一种就是当检测到请求失效时，网站自动去请求新的token，第二种方式在app保持登陆状态上面用得比较多。
3.下面进入主题，我们请求用的是axios，不管用何种请求方式，刷新token的原理都是一样的。
//封装了一个统一的请

			
		

	





	

		

			

				
					
webapi下的token认证和刷新token

				
			

			

				

					04-27
				

			

		

		

			
				
通过ajax分配相应的clientID和Secret及用户名和...测试页面click_me_please_iframe.html包含相应的刷新和认证，同时refresh_token以文件的形式进行存储，方便下次程序直接使用，不必要在产生新的token;开发工具是vs2017

			
		

	





	

		

			

				
					
前端如何实现token的无感刷新

				
			

			

				

					xiangzhihong8的专栏
				

				

					10-22
					
					899
					
				

			

		

		

			
				
通常，对于一些需要记录用户行为的系统，在进行网络请求的时候都会要求传递一下登录的token。不过，为了接口数据的安全，服务器的token一般不会设置太长，根据需要一般是1-7天的样子，token过期后就需要重新登录。不过，频繁的登录会造成体验不好的问题，因此，需要体验好的话，就需要定时去刷新token，并替换之前的token。
要做到token的无感刷新，主要有3种方案：
方案一：
后端返回过期时间，前端每次请求就判断token的过期时间，如果快到过期时间，就去调用刷新token接口。
缺点：需要后端额外提

			
		

	





	

		

			

				
					
前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录

				
			

			

				

					baidu_39009276的博客
				

				

					12-08
					
					8163
					
				

			

		

		

			
				
前端刷新token，判断token是否过期，若没有过期则刷新token，过期则退出登录

			
		

	





	

		

			

				
					
无感刷新token（从后端到前端整个流程）

				
			

			

				

					m0_59598029的博客
				

				

					02-17
					
					1871
					
				

			

		

		

			
				
token刷新是前端安全中必要的一部分，本文从后端到前端整个流程介绍如何实现无感刷新token。页面代码亲自实现并跑通，请放心食用。如需源码，请在评论区留言。！！新建 config/constant.js/* localStorage存储字段 *///短token//长token、/* HTTP请求头字段 *///存放短token//存放长token新建 config/returnCodeMap.js// 在其它客户端被登录// 重新登陆// token过期//接口请求成功。

			
		

	





	

		

			

				
					
前端实现token无感刷新

				
			

			

				

					weixin_48864616的博客
				

				

					04-06
					
					889
					
				

			

		

		

			
				
假如token 的过期时间是5分钟，那么在高频率使用的情况下（每秒访问接口）每隔5分钟就会刷新一次token。如果web端有大屏展示页面的话，过期刷新的方案跟定时刷新的方案调用的token次数其实一样。但过期刷新的时候可能会阻碍接口的请求，导致每隔5分钟会出现一次接口变慢的情况。当token过期的时候，刷新token,前端需要做到无感刷新token,即刷token时要做到用户无感知，避免频繁登录。后端每个需要token的接口，都返回token的失效时间指的是定时器的时间也是后端返回token失效的时间。

			
		

	





	

		

			

				
					
实现无感刷新token(看这一篇就够了)

				
			

			

				

					weixin_57909742的博客
				

				

					11-09
					
					3473
					
				

			

		

		

			
				
无感知刷新Token是指，在Token过期之前，系统自动使用Refresh Token获取新的Access Token，从而实现Token的无感知刷新，用户可以无缝继续使用应用。如何判断Token是否过期？如何在Token过期时自动使用Refresh Token获取新的Access Token？下面将介绍如何实现无感知刷新Token的具体步骤。无感刷新Token技术是一种在客户端应用中自动刷新访问令牌的机制，它通过提供用户无感知的刷新操作，改善了用户体验，提高了安全性，同时减轻了服务端的负担。

			
		

	





	

		

			

				
					
数据结构与算法 - B树

					
最新发布

				
			

			

				

					ltt159264的博客
				

				

					08-08
					
					1446
					
				

			

		

		

			
				
int t;int[] keys;this.t = t;@Overrideleaf表示是否是叶子节点keyNumber为keys中有效key数目t为最小度数，它决定了节点中key的最小、最大数目，分别是t - 1 和 2t - 1keys存储此节点的keychildren存储此节点的childtoString只是为了方便调试和测试，非必须实际keys应当改为entries以便同时保存key和value，刚开始简化实现Node root;this(2)

			
		

	





	

		

			

				
					
uniapp无痛刷新token

				
			

			

				

					10-19
				

			

		

		

			
				
前端在判断access token即将过期时，发送刷新请求，服务器验证refresh token的有效性并生成新的access token，前端将新的access token存储起来，继续使用新的token发起请求，从而实现无痛刷新token。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值