如果找不到会话,则重定向到登录页面

我有一个使用 next-auth 的小应用程序,它根据用户是否登录显示登录/退出按钮。这些按钮按预期工作,并在单击时将我重定向到登录页面。

但是如果没有登录,我如何自动重定向到登录页面?

我尝试在 signIn() 下添加 if(session)...,但这给了我错误:

ReferenceError: window is not defined

还有 router.push('/api/auth/signin) 但这给了我错误:

错误:未找到路由器实例。您应该只在应用程序的客户端内使用“next/router”。 https://nextjs.org/docs/messages/no-router-instance

import React from "react";
import { useSession,signIn,signOut } from "next-auth/client";
import { useRouter } from 'next/router'
export default function Home() {

  const [session,loading] = useSession();
  const router = useRouter()

  if (session) {
    console.log("session = true")
    router.push('/blogs')
    return (
      <>
        Signed in as {session.user.name} <br />
        <button onClick={() => signOut()}>Sign out</button>
      </>
    );
  }
  console.log("session = false")
 
  return (
    <>
      Not signed in <br />
      <button onClick={() => signIn()}>Sign in</button>
    </> 
  );
}
hgp_11 回答:如果找不到会话,则重定向到登录页面

您需要将代码放在 useEffect 中,这样它只会在组件安装时在客户端上执行。此外,您需要等到 loading 变量变为 false,然后才应检查 session 变量。

useEffect(()=>{
  if(!loading){
    if (session) {
      console.log("session = true")
      router.push('/blogs')
    }else{
      // maybe go to login page
      router.push('/login')
  }
 }
},[router,session])

此外,请查看 How to protect routes in Next.js next-auth? 以获取包含 loginlogout 页面的完整解决方案。

本文链接:https://www.f2er.com/1492.html

大家都在问