请求时token过期自动刷新token操作
1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的合法性,服务器会验证token,只有通过验证才会返回请求结果。 2.当token失效时,现在的网站一般会做两种处理,一种是跳转到登陆页面让用户重新登陆获取新的token,另外一种就是当检测到请求失效时,网站自动去请求新的token,第二种方式在app保持登陆状态上面用得比较多。 3.下面进入主题,我们请求用的是axios,不管用何种请求方式,刷新token的原理都是一样的。 //封装了一个统一的请 在开发Web应用时,安全是至关重要的,而`token`机制正是为了确保用户请求的安全性。`token`通常是在用户登录成功后由服务器生成并发送给客户端(浏览器)的一个唯一标识,具有一定的时效性。每次用户发起请求时,都需要将这个`token`作为身份验证的凭证,服务器接收到请求后会验证`token`的有效性,只有验证通过,才会返回请求的数据。 当`token`过期时,有两种常见的处理策略。一种是直接将用户重定向至登录页面,要求用户重新登录以获取新的`token`;另一种更为便捷的方式是自动刷新`token`。这种方法常见于希望用户保持登录状态的应用,如移动应用。自动刷新`token`的流程通常是,当检测到一个请求因`token`过期而失败时,客户端自动向服务器发送刷新`token`的请求,获取新的`token`,然后用新`token`重试之前的失败请求。 在本文中,我们讨论的是使用`axios`库实现自动刷新`token`的策略。我们需要封装一个统一的请求函数,这个函数会从`localStorage`中获取当前的`token`,并将它添加到请求头中。同时,我们还需要一个用于检查响应状态的函数,以便识别出`token`失效的情况。当检测到`token`失效(代码为1002)时,我们会调用`refreshTokenRequst`函数来刷新`token`。 `refreshTokenRequst`函数负责向服务器发送刷新`token`的POST请求,提供当前的刷新`token`(通常在初次登录时一并发放)。服务器验证成功后,会返回新的`token`,我们将其更新到`localStorage`中,并通知所有等待的请求重新尝试。 为了避免多个请求同时尝试刷新`token`导致的问题,我们引入了一个全局变量`isRefreshing`作为标志。当`token`失效且正在刷新时,其他请求会等待,直到`token`刷新完成。为此,我们使用一个`Promise`数组`subscribers`来收集那些因`token`失效而被延迟的请求,当`token`刷新完成后,我们依次执行这些`Promise`,从而保证了请求的正确顺序。 总结起来,自动刷新`token`的关键在于正确地处理并发请求,避免因`token`失效而引起的混乱。利用`Promise`和全局状态管理可以有效地控制这一过程。在处理多请求并发时,确保每个因`token`过期而暂停的请求都能在`token`刷新后正确重试,是实现这一功能的核心。此外,防止重复刷新`token`的操作也是设计中的重要考量,以优化用户体验和减少服务器负担。