时间戳

首页 > 解决方案 > 如果未找到会话，则重定向到登录页面

javascript - 如果未找到会话，则重定向到登录页面

问题描述

我有一个使用 next-auth 的小型应用程序，它显示一个登录/注销按钮，具体取决于用户是否登录。这些按钮按预期工作，并在单击时将我重定向到登录页面。

但是，如果未登录，如何自动重定向到登录页面？

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

ReferenceError：未定义窗口

还有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>
    </> 
  );
}

标签： javascriptnext.jsnext-auth

解决方案

您需要以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])

另外，看看如何保护 Next.js 中的路由 next-auth？一个完整的解决方案login和logout页面。

推荐阅读