如何在react nextjs中创建受保护的页面

npm install next-auth
npm install jsonwebtoken

import NextAuth from 'next-auth';
import Providers from 'next-auth/providers';

export default NextAuth({
  providers: [
    Providers.Credentials({
      // 配置你的自定义登录逻辑
      async authorize(credentials) {
        // 在这里验证用户的凭据
        // 如果验证成功，返回用户信息
        // 如果验证失败，返回null
        const user = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };
        if (user) {
          return Promise.resolve(user);
        } else {
          return Promise.resolve(null);
        }
      }
    })
  ],
  // 配置其他选项
});

import { getSession } from 'next-auth/client';
import { useRouter } from 'next/router';

export default function ProtectedPage({ user }) {
  const router = useRouter();

  if (!user) {
    // 用户未登录，重定向到登录页面
    router.push('/login');
    return null;
  }

  return (
    <div>
      <h1>受保护的页面</h1>
      <p>欢迎, {user.name}!</p>
    </div>
  );
}

export async function getServerSideProps(context) {
  const session = await getSession(context);

  return {
    props: {
      user: session?.user || null
    }
  };
}

import { signIn } from 'next-auth/client';

export default function LoginPage() {
  const handleLogin = async (e) => {
    e.preventDefault();
    const result = await signIn('credentials', {
      // 提交用户凭据
      username: e.target.username.value,
      password: e.target.password.value,
      redirect: false
    });

    if (!result.error) {
      // 登录成功，重定向到受保护的页面
      router.push('/protected');
    }
  };

  return (
    <div>
      <h1>登录页面</h1>
      <form onSubmit={handleLogin}>
        <input type="text" name="username" placeholder="用户名" />
        <input type="password" name="password" placeholder="密码" />
        <button type="submit">登录</button>
      </form>
    </div>
  );
}

import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>首页</h1>
      <Link href="/login">
        <a>登录</a>
      </Link>
      <Link href="/protected">
        <a>受保护的页面</a>
      </Link>
    </div>
  );
}