next.js：_middleware with nextresponse blodering的图像

Question

这个问题扩展了这个问题。 Next.js中的_middleware带有import {nextresponse}从“ Next/Server”;可用于JWT身份验证，但会阻止所有包括图像的路由。这意味着，如果您想通过CSS或图像在重定向路由中加载的图像，则不会加载。下面的代码封锁地址栏重定向并允许图像加载。访问令牌可能会更好

Answer 1

更新：经过一些调试后，这就是我想到的。我编写的先前代码不会让您在登录后重定向到主页。原因是_middleware似乎在 /api /登录之前运行并基于预先条件，只需将它们重定向到登录，然后返回void（_Middleware'in Redirect上）。

此更新的代码允许 /api /登录无需刷新令牌即可进行路由，如果它们在没有令牌的情况下浏览地址栏，则将其发送回登录

import { NextResponse } from "next/server";
export default function (req: {
    url?: any;
    cookies?: any;
}): void | NextResponse {
    const { cookies } = req;
    const url: string = req.url;
    const refreshToken: string | undefined = cookies?.refresh_token_extreme;
    const baseUrl: string = "http://localhost:3000";

    // vercel.svg is used in /login
    const unprotectedPaths: string[] = [
        `${baseUrl}/login`,
        `${baseUrl}/favicon.ico`,
        `${baseUrl}/vercel.svg`,
        `${baseUrl}/_next/webpack-hmr`,
        `${baseUrl}/attachables/campus-images/image1.jpg`,
        `${baseUrl}/attachables/mnhs-images/logos/login_logo.png`,
        `${baseUrl}/attachables/mnhs-images/logos/mnhs_favicon_og.ico`,
    ]
    
    
    if (unprotectedPaths.includes(url)) {
        return void 0;
    } else if (!refreshToken && url === "http://localhost:3000/api/login") {   
        return NextResponse.next();
    } else if (!refreshToken) {
        return NextResponse.redirect(`${baseUrl}/login`);
    } else { 
        return NextResponse.next();
    }
}

Answer 2

项目中的每条路线将调用中间件。以下是执行订单：

1. Next.config.js的标题
2. 从Next.config.js
3. Middleware（重写，重定向等）
4. 从Next.config.config.js
5. filesystem routes（public/_next/_next/static/static/static/static/static/static/ ，
6. 。
7. 页面
8. 等

​

Custom matcher config
Conditional statements

​a href =“ https://nextjs.org/docs/advanced-features/middleware” rel =“ nofollow noreferrer”>以获取更多信息