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

Question

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

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

如果有任何其他方法可以在设定的时间间隔内实现 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 不会进行不必要的渲染。

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

How can I refresh JWT token every "t" minutes?

javascript

reactjs

setinterval

use-effect

说明