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

Question

我正在尝试每“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)
    }, [])

Answer 1

这是一个工作的codesandbox 示例。您可以更改功能以匹配您的情况

解释

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

const ref = useRef()

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

您需要在内部使用清理函数useEffect以避免内存泄漏：

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

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

clearInterval(ref.current)

请记住在 axios 调用函数上使用useCallbackhook，以确保 React 不会不必要地渲染。