何无感刷新token;token还没有刷新完成时,发送了其他请求需要如何处理

无感刷新 token 的实现通常基于以下几个步骤:

  1. Token 有效期:首先,服务器会为每个 token 设置一个有效期,例如 30 分钟或 1 小时。在这个有效期内,用户可以使用 token 访问受保护的资源。
  2. 定期检查:前端应用会在用户活动期间定期检查 token 的有效期。通常通过轮询或心跳机制实现,即在一定时间间隔后发送请求到服务器,检查 token 是否仍然有效。
  3. 刷新 Token:如果服务器返回 token 已失效的信息,前端应用会立即发起一个新的请求到认证服务器,使用refreshToken这个token(后端一般会返回一个长token和一个短token,长短指的是过期时间,refreshToken作为长token存在localstorage中用来向后端携带这个token去请求短token,accessToken作为短token也是存在localstorage中用这个token去请求受保护的请求放到请求头headers中)来获取新的访问 token。
  4. 无缝切换:在获取到新 token 后,前端应用会立即更新本地存储的 token,并使用新 token 继续之前的操作,从而实现了无缝的用户体验

 示例:

  1. 设置 Token 有效期:假设服务器为每个 token 设置了 30 分钟的有效期。
  2. 定期检查:前端应用每 5 分钟向服务器发送一个请求,检查当前 token 是否仍然有效。
// 使用 setInterval 定时发送心跳请求  

	setInterval(() => {  

	  checkTokenValidity();  

	}, 5 * 60 * 1000); // 5 分钟

   3、检查 Token 有效性:前端应用发送心跳请求到服务器,服务器返回 token 是否有效的信息

  

async function checkTokenValidity() {  

	  try {  

	    const response = await fetch('/api/heartbeat', {  

	      headers: {  

	        Authorization: `Bearer ${localStorage.getItem('token')}`  

	      }  

	    });  

	  

	    if (!response.ok) {  

	      // Token 失效,需要刷新  

	      refreshToken();  

	    }  

	  } catch (error) {  

	    // 处理错误  

	    console.error('Error checking token validity:', error);  

	  }  

	}

   4、刷新 Token:如果 token 失效,前端应用会发送一个请求到认证服务器,获取新的访问 token。

async function refreshToken() {  

	  try {  

	    const response = await fetch('/api/auth/refresh', {  

	      method: 'POST',  

	      headers: {  

	        'Content-Type': 'application/json'  

	      },  

	      body: JSON.stringify({  

	        refreshToken: localStorage.getItem('refreshToken')  

	      })  

	    });  

	  

	    if (response.ok) {  

	      const data = await response.json();  

	      // 更新本地存储的 token  

	      localStorage.setItem('accessToken', data.accessToken);  

	    } else {  

	      // 处理刷新 token 失败的情况,例如提示用户重新登录  

	      console.error('Failed to refresh token:', response.status);  

	    }  

	  } catch (error) {  

	    // 处理错误  

	    console.error('Error refreshing token:', error);  

	  }  

	}

 总结:在这个示例中,前端应用通过定期检查 token 的有效性,并在 token 失效时无缝刷新 token,从而保持了用户的登录状态,并提供了无缝的用户体验。需要注意的是,为了安全起见,刷新 token 也应该有一定的有效期,并在过期后要求用户重新登录

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值