使用中间件保护 Next.js 中的路由

Question

我正在尝试使用中间件保护我的 Next.js 13.4 应用程序中的路由，我正在使用新的应用程序目录，我面临的问题是根据令牌重定向用户，如果有令牌的话如果没有令牌，我们将他重定向到主页，我们将他重定向到登录页面，这告诉我localhost重定向你太多次。我不明白问题出在哪里以及如何解决，我已经搜索了很多并且不知道如何解决该错误，如果有人可以帮助我解决这个问题那就太好了

首页的路径是“/”

登录页面的路径是“/auth/login”

请记住，我正在使用组路由（root）是应用程序的主要布局所在，（auth）是所有身份验证的布局。

这是我写的中间件：

import { NextRequest, NextResponse } from "next/server";

export default async function middleware(req: NextRequest) {
const path = req.nextUrl.pathname;
const authToken = req.cookies.get("OurSiteJWT");
console.log(authToken)
if (authToken) {
return NextResponse.redirect(new URL("/", req.url));
} 
else if (!authToken) {
// return NextResponse.redirect(new URL("/auth/login", req.url));
return null;
}
return NextResponse.next();
}

export const config = {
matcher: ["/auth/login", "/:path*"]
}

Answer 1

我认为你在这里创建了一个循环：

如果

authToken

存在，则会重定向到根 URL（“/”）。如果 authToken 不存在，则不会重定向并允许请求继续。但是，如果请求是针对根 URL（“/”）且 authToken 存在，则会再次重定向到根 URL，从而导致循环。

添加此内容应该可以解决问题：

if (authToken && path !== "/") {
    return NextResponse.redirect(new URL("/", req.url));
} 
else if (!authToken && path !== "/auth/login") {
    return NextResponse.redirect(new URL("/auth/login", req.url));
}
return NextResponse.next();