Nextjs UseEffect 不会在路线更改时呈现

Question

我在每个组件中的组件内部的 useEffect 上遇到问题。我在该组件中进行了一些身份验证和重定向，但我发现当我使用 Nextjs 链接或浏览器中的返回按钮时，布局 useEffect 不会重新渲染，这意味着它不会检查用户是否已登录。

这是我的布局组件

const Layout = ({ children }) => {

  const router = useRouter()
  const { setAuthenticated, userFromDB, setUserFromDB, setIsVender, isVender } = useContext(AuthContext)

  //cuando hacemos un login el token se guarda en el local storage asi que comprobamos que exista
  useEffect(() => {
    const checkToken = async () => {
      const token = localStorage.getItem('FBIdToken')
      if (token) {
        const decodedToken = jwtDecode(token);
        //si la fecha de expiracion del token supero a la actual, redirect al login
        if (decodedToken.exp * 1000 < Date.now()) {
          setAuthenticated(false)
          router.replace('/login');
        } else {
          if(!userFromDB){
            const user = await getUser(decodedToken.user_id);
            //si encontro un usuario, lo asignamos al context api
            if(user){
              console.log(user)
              //  obtenemos el objecto con los datos del usuario y seteamos en el context si es vendedor o no
              if(typeof user.isVender !== undefined){
                user.isVender ? setIsVender(true) : setIsVender(false);
              }
              setUserFromDB(user);
            }
            setAuthenticated(true)
          }
        }
        console.log('ejecutando');
      } else {
        if(router.pathname !== "/" && 
            router.pathname !== "/download-app" && 
            router.pathname !== "/register" && 
            router.pathname !== "/login"
          ) {
          console.log(router.pathname, 'redirigiendo')
          router.replace('/login')
        }
        
      }
    }
    //comprobamos que haya un token y redirigimos al usuario en base a el
    checkToken();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isVender])


  return (
    <div>
      {children}
    </div>
  )
}

这就是我将其导入 _app.js 组件的方式

  return (
    <AuthProvider>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AuthProvider>
  )
}

我希望你能帮助我，提前致谢！

Answer 1

如果您希望 useEffect 在路由器更改时触发，则必须将其添加为 useEffect 挂钩的依赖项：

useEffect(() => {
   ...
}, [isVender, router.pathname])