如何根据用户是否登录在服务器组件中重定向到不同的 URL

问题描述 投票:0回答:1

如果用户已经登录,我正在尝试将用户重定向到“/chat”页面。在基于文档的 Next.js 12 中,我可以使用以下代码:

export async function getServerSideProps(context) {
  const session = await getSession(context.req, context.res)

  if (!!session) {
    return {
      redirect: {
        destination: '/chat',
        permanent: false,
      },
    }
  }

  return {
    props: {},
  }
}

因为我只使用 Auth0 进行身份验证。

但是,我收到一条错误,指出它在 Next13 中已弃用,这是可以理解的,因为我们现在可以使用 fetch 代替。我成功地使用客户端方法来重定向用户:

export default  function Home() {
  const {isLoading, user, error} = useUser();
  const router = useRouter()

  if (isLoading) return <LoadingSkeleton />
  if (error) return <div>{error.message}</div>
  return (
    <div>
      <Head>
        <title>Chatty AI - Login or Sign Up</title>
      </Head>
      <div className='min-h-screen w-full bg-gray-800 flex justify-center items-center text-white text-center'>
        <div>
        {
          !!user && router.push('/chat')
        }
        {
          !user && 
          <>
          <Link href="/api/auth/login" className='rounded-md bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600'>
          Login
          </Link>
          <Link href="/api/auth/signup" className='rounded-md bg-emerald-500 px-4 py-2 text-white hover:bg-emerald-600'>
          Sign Up
          </Link>
          </>
        }
        </div>
      </div>
    </div>
  )
}

但是,如果不使用“使用客户端”,我无法为服务器端组件执行此操作。

next.js auth0 next.js13
1个回答
0
投票

您尝试过使用

redirect
吗?

import { redirect } from 'next/navigation'

export default  function Home() {
    const {isLoading, user, error} = useUser();

    if (!user) {
        redirect('/login')
    }
    // ...
}

文档提到这可以在服务器和客户端组件中使用:https://nextjs.org/docs/app/api-reference/functions/redirect

© www.soinside.com 2019 - 2024. All rights reserved.