如何每“t”分钟刷新一次 JWT 令牌？

Posted 2023-03-17

【中文标题】如何每“t”分钟刷新一次 JWT 令牌？

【英文标题】：How can I refresh JWT token every "t" minutes?

【发布时间】：2021-11-10 04:23:20

【问题描述】：

我正在尝试每“t”分钟自动刷新一次访问令牌；我在 useEffect 中（在根组件中）实现了一个 setInterval，它发送一个新访问令牌的请求。当我运行代码时，有时间隔从 onMount 开始，有时根本不运行。

另一个问题是，当我将用户重定向到登录页面时，我尝试清除间隔，即使在 clearInterval 之后它仍会继续运行。

如果有任何其他方式可以在设定的时间间隔内实现 JWT 刷新令牌，我也愿意接受。

 useEffect(() => 
      async function getRefreshToken() 
        const response = await axios.post("http://localhost:3001/refreshToken", refreshToken, withCredentials: true)
        if (response.data.redirect) 
          clearInterval(refresh)
          history.replace(`$response.data.redirect`)
          localStorage.clear()
         

      const refresh = setInterval(getRefreshToken, 4000)
    , [])

【参考方案1】：

这是一个有效的codesandbox example。您可以更改功能以匹配您的情况

说明

你想要的是一个 ref 来存储间隔以在 useEffect 之外清除它。您可以像在useEffect 中一样设置间隔，并将间隔保存在 ref 中：

const ref = useRef()

useEffect(() => 
   const interval = setInterval(...)
   ref.current = interval
, [])

您需要在useEffect 中使用cleanup function 以避免内存泄漏：

useEffect(() => 
   const interval = setInterval(...)
   ref.current = interval
   return () => clearInterval(interval)
, [])

然后，您可以在使用时清除间隔：

clearInterval(ref.current)

记得在你的 axios 调用函数上使用 useCallback 钩子，以确保 react 不会不必要地渲染。

【讨论】：

哇。非常清晰和有用的解释。也感谢 useCallback 提示。我会对此进行测试并接受您的回答。

如果网站处于后台或不活动状态，setInterval() 会起作用吗？

@EzyHoo 如果该组件被渲染，那么是的，它将触发 setInterval。如果用户未处于活动状态，令牌将在某个时间点“t”过期，然后您可以重定向/强制用户再次登录。