如何使用NextAuth实现简单的受保护路由？

1. 新建中间件文件 #

在项目根目录（或src目录下）创建middleware.ts，用NextAuth的中间件管控路由访问规则。

2. 写入路由逻辑代码 #

import { withAuth } from "next-auth/middleware"
import { NextResponse } from "next/server"

export default withAuth(
  function middleware(req) {
    const { pathname } = req.nextUrl
    const isLoggedIn = req.nextauth.token !== null

    // 已登录用户访问登录/注册页，直接跳转到个人中心
    if (isLoggedIn && (pathname === "/signin" || pathname === "/signup")) {
      return NextResponse.redirect(new URL("/profile", req.url))
    }

    // 未登录用户访问个人中心，跳转到登录页
    if (!isLoggedIn && pathname === "/profile") {
      return NextResponse.redirect(new URL("/signin", req.url))
    }
  },
  {
    // 指定需要中间件处理的路由
    matcher: ["/profile", "/signin", "/signup"],
    // Credentials Provider需开启此项，避免默认校验拦截请求
    authorized: () => true,
  }
)

3. 额外说明 #

• 像/shop这类中性路由，因为不在matcher数组范围内，所以无论用户是否登录都能直接访问，无需额外配置。
• 你现有的[...nextauth].ts代码逻辑正常，已经实现了用户校验和JWT会话功能，不需要修改。

内容的提问来源于stack exchange，提问作者mpoweredo