Next.js 14 认证与授权：从 Session 到 OAuth 的完整实现

在现代 Web 应用中，认证与授权是不可或缺的一部分。Next.js 14 提供了多种方式来实现用户认证和权限控制。今天，我们就来深入探讨如何在 Next.js 14 中实现完整的认证授权系统。

NextAuth.js 集成

1. 基础配置

首先安装 NextAuth.js：

npm install next-auth@beta

配置认证提供者：

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

const handler = NextAuth(authConfig);
export { handler as GET, handler as POST };

// auth.config.ts
import type { NextAuthConfig } from 'next-auth';
import Credentials from 'next-auth/providers/credentials';
import { z } from 'zod';

export const authConfig: NextAuthConfig = {
  providers: [
    Credentials({
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(6) })
          .safeParse(credentials);

        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await prisma.user.findUnique({
            where: { email }
          });

          if (!user) return null;

          const passwordsMatch = await bcrypt.compare(password, user.password);

          if (passwordsMatch) return user;
        }

        return null;
      }
    })
  ],
  pages: {
    signIn: '/login',
    error: '/error',
  },
  callbacks: {
    authorized({ auth, request: { nextUrl } }) {
      const isLoggedIn = !!auth?.user;
      const isOnDashboard = nextUrl.pathname.startsWith('/dashboard');

      if (isOnDashboard) {
        if (isLoggedIn) return true;
        return false;
      } else if (isLoggedIn) {
        return Response.redirect(new URL('/dashboard', nextUrl));
      }
      return true;
    }
  }
};

2. 中间件配置

// middleware.ts
import NextAuth from 'next-auth';
import { authConfig } from './auth.config';

export const { auth: middleware } = NextAuth(authConfig);

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

3. 客户端集成

// app/providers.tsx
'use client';

import { SessionProvider } from 'next-auth/react';

export function Provide