路由拦截

目的

通常我们需要对保护的页面进行路由拦截，即未登录的用户不能访问我们保护起来的路由，

当用户访问受保护的路由时，会自动重定向到 signIn 页面，基于这样的需求，我们需要实现路由拦截功能。

实现方案

使用 Next-Auth

难度较高，官网：https://next-auth.js.org/

使用 Next 的 middleware 功能

使用 next 自带的 middleware 实现路由拦截功能，即在 /src 下创建 middleware.ts 文件

import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';

const signInPage = '/login';
const signUpPage = '/register';
const publicPaths = ['/_next', '/favicon.ico'];

// This function can be marked `async` if using `await` inside
// NextResponse 在中间件中提供了四种方法。
// - redirect()：redirect 方法将请求从一条路由重定向到另一条路由。
// - rewrite()：重写你的退出响应。
// - next()：next 方法将中间件链从一个中间件延续到另一个中间件。
// - json(): json 方法返回 JSON 响应或数据
export function middleware(req: NextRequest) {
  const { pathname, search, origin, basePath } = req.nextUrl;
  const cookieKey: any = 'accessToken';
  if (req.cookies.has(cookieKey)) {
    return NextResponse.next();
  }

  const signInUrl = new URL(
    `${basePath}${signInPage}?redirect=${pathname}`,
    origin
  );
  return NextResponse.redirect(signInUrl);
}

export const config = {
  matcher: ['/protectd/:path*', '/setting/:path*', '/profile/:path*'],
};

在 matcher 数组中添加要拦截的路由
'/protectd/:path*' 表示 /protectd/ 下的所有路由都会拦截

关于 middleware 的使用可以参考 https://nextjs.org/docs/app/building-your-application/routing/middleware

Previous用户登录 Next为什么使用Cookie