Jwt 如何在React中实现JTWs的刷新?

Jwt 如何在React中实现JTWs的刷新?,jwt,jwt-auth,express-jwt,Jwt,Jwt Auth,Express Jwt,讨论使用刷新令牌延长访问令牌寿命的理论和工作流程 正如链接的答案所建议的,我应该(1)在应用程序打开时进行到期检查,(2)每隔x小时定期检查一次,如果访问令牌即将到期,则刷新它 我的问题是,如何在React或任何前端代码中实现这一点 假设我的单页应用程序有3个页面,每个页面有5个组件 当用户打开应用程序时,它可能是3个URL中的任意一个,哪个组件(如果有)应该负责此检查?在验证完成之前,是否应该阻止任何其他组件获取数据 同样,哪个组件(如果有)应该进行周期检查 我认为,只要正确执行上述2,就不可

讨论使用刷新令牌延长访问令牌寿命的理论和工作流程

正如链接的答案所建议的,我应该(1)在应用程序打开时进行到期检查,(2)每隔x小时定期检查一次,如果访问令牌即将到期,则刷新它

我的问题是,如何在React或任何前端代码中实现这一点

假设我的单页应用程序有3个页面,每个页面有5个组件

当用户打开应用程序时,它可能是3个URL中的任意一个,哪个组件(如果有)应该负责此检查?在验证完成之前,是否应该阻止任何其他组件获取数据

同样,哪个组件(如果有)应该进行周期检查


我认为,只要正确执行上述2,就不可能出现用户使用过期访问令牌发出请求的情况。至少,我想不出会发送过期访问令牌的边缘情况。这是否正确?

理想情况下,您的API调用中会有一个处理程序,该处理程序将检查JWT是否即将过期,并抢先执行对服务器的额外调用以请求替换令牌。如果用户正在积极与您的应用程序交互,则刷新应该在需要时进行,而不是更频繁地进行,从而减少对应用程序的调用次数

在我的一个项目中,我们有一个
APIClient
类,它包含我们需要执行的所有调用的方法,例如
getownhuser
getTicketById
,每个调用实际执行请求的方法
fetchJSON

fetchJSON
方法在执行请求之前,使用存储在cookie中的日期检查JWT的有效性。如果已接近到期或已到期,则该方法将执行另一个调用,以使用原始(或后续替换)令牌发出时发出的
refreshToken
请求新令牌。如果旧令牌尚未过期,则可以同时执行这两个调用,这样用户就不会出现延迟

这样做的一个缺点是,现有的潜在未过期的JWT仍然有效,并且如果获得,仍然可以使用(!)。要纠正这一点,您只需等待JWT过期后再续订,尽管这可能会在额外调用发生时给用户造成短暂的延迟。虽然,这是你试图避免的结果

只要您避免将JWT和刷新令牌(如果您选择使用它)存储在localstorage中,就可以了。您还应该确保JWT的有效性长度相当短(我们使用15分钟),因为如果不减慢服务器端验证并使它们的使用变得毫无意义,就不可能撤销它们