如何每“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 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 不会不必要地渲染。