我正在做一个Next.js项目,并试图在我的应用程序中实现多个中间件。虽然我已经找到了在Next.js中使用**next-connect
包的单个中间件的示例,但我更喜欢在不依赖任何外部包的情况下实现这一点。
我有一个middleware.ts
文件,我想在其中定义和使用多个中间件。下面是我的middleware.ts
**文件中的代码片段:
import { NextResponse, NextRequest } from 'next/server';
export function middleware(request: NextRequest) {
const userId = request.cookies.get('userId')
if (!userId) {
return NextResponse.redirect(new URL('/auth/login', request.nextUrl.origin).href);
}
return NextResponse.next();
}
export const config = {
matcher:'/profile/:path*',
};
她就是我所尝试的:
import { NextResponse, NextRequest } from "next/server";
export function profileMiddleware(request: NextRequest) {
const userId = request.cookies.get("userId");
if (!userId) {
return NextResponse.redirect(
new URL("/auth/login", request.nextUrl.origin).href
);
}
return NextResponse.next();
}
export function authMiddleware(request: NextRequest) {
const userId = request.cookies.get("userId");
if (userId) {
return NextResponse.redirect(
new URL("/", request.nextUrl.origin).href
);
}
return NextResponse.next();
}
export default {
middleware: [
{
matcher: '/profile/:path*',
handler: profileMiddleware,
},
{
matcher: '/auth/:path*',
handler: authMiddleware,
},
],
};
1条答案
按热度按时间smtd7mpg1#
您可以使用中间件链接来实现此目的。以下是您可以实现这一点的方法:
1.在
src
文件夹中创建一个名为middlewares
的文件夹。1.在
middlewares
文件夹中创建一个名为stackHandler.ts
的文件,并将以下内容粘贴到其中:1.创建另一个名为
withUser.ts
的文件,并将以下内容粘贴到其中:1.最后在您的
middleware.ts
文件夹中的src
文件中粘贴此内容:注意事项
如下定义MiddlewareFactory类型(如果不使用Typescript,请忽略此内容):
注意事项
您可以创建任意数量的中间件,如
withUser
,方法是创建它们,然后将它们导入middlewares.ts
并将它们推入middlewares
数组。