中间件:在next.js中的中间件中运行许多条件的效率有多低？

Question

我正在使用Next.js重新构建一个应用程序，但我担心在新的"_Middleware“中运行许多条件可能效率低下，因为每个请求都会调用它。我编写了下面的代码，以阻止那些没有令牌(从登录)但使用自动登录的人的所有路由，还允许登录/注册/忘记gets路由& api端点(它也会被阻塞)，当然，也允许登录。

有8个条件检查每个请求，这是公平还是低效？

我的意大利面和下面的代码墙。很管用但是.是的..。

​

import { NextResponse } from "next/server";
import {
    generateAccessToken,
    verifyRefreshToken,
} from "../_operations/jwt/jwt";
interface Cookies {
    cookies?: {
        refresh_token_extreme?: string;
        access_token_extreme?: string;
    };
}
export default async function (req: {
    url?: any;
    cookies?: any;
}): Promise<NextResponse | void> {
    const { cookies }: Cookies = req;
    const url: string = req.url;
    const refreshToken: string | undefined = cookies?.refresh_token_extreme;
    const accessToken: string | undefined = cookies?.access_token_extreme;
    const baseUrl: string = "http://localhost:3000";

    // unprotected routes are used for login and signup
    const unprotectedPaths: string[] = [
        `${baseUrl}/login`,
        `${baseUrl}/signup`,
        `${baseUrl}/forgotPassword`,
        `${baseUrl}/favicon.ico`,
        `${baseUrl}/vercel.svg`,
        `${baseUrl}/_next/webpack-hmr`,
        `${baseUrl}/attachables/campus-images/image1.jpg`,
        `${baseUrl}/attachables/campus-images/image10.jpg`,
        `${baseUrl}/attachables/campus-images/image15.jpg`,
        `${baseUrl}/attachables/mnhs-images/logos/login_logo.png`,
        `${baseUrl}/attachables/mnhs-images/logos/mnhs_favicon_og.ico`,
    ];
    const openApiPaths: string[] = [
        `${baseUrl}/api/login`,
        `${baseUrl}/api/signup`,
        `${baseUrl}/api/forgotPassword`,
    ];
    const openDynamicPaths: string[] = [
        `${baseUrl}/forgotPassword/reset`,
    ]
    const openDynamicApiPaths: string[] = [
        `${baseUrl}/api/verification/`,
        `${baseUrl}/api/forgotPassword/`,
    ]
    for (const path of openDynamicApiPaths) {
        if (url.includes(path)) return NextResponse.next();
    }   
    if (url.includes(`${baseUrl}/forgotPassword/reset/`)) return NextResponse.next();
    if (openApiPaths.includes(url)) return NextResponse.next();
    if (openDynamicPaths.includes(url)) return NextResponse.next();

    if (!refreshToken && unprotectedPaths.includes(url)) return void 0;
    if (!accessToken && !refreshToken)
        return NextResponse.redirect(`${baseUrl}/login`);
    if (!accessToken && refreshToken && unprotectedPaths.includes(url)) {
        const verifiedToken: any = await verifyRefreshToken(refreshToken);
        const newToken: string = await generateAccessToken(verifiedToken);
        return NextResponse.redirect(`${baseUrl}`).cookie(
            "access_token_extreme",
            newToken,
            {
                httpOnly: true,
                secure: true,
                sameSite: "strict",
                path: "/",
                expires: new Date(Date.now() + 60 * 1000 * 10), // 10 minutes
            }
        );
    }
    if (!accessToken && refreshToken) {
        const verifiedToken: any = await verifyRefreshToken(refreshToken);
        const newToken: string = await generateAccessToken(verifiedToken);
        return NextResponse.next().cookie("access_token_extreme", newToken, {
            httpOnly: true,
            secure: true,
            sameSite: "strict",
            path: "/",
            expires: new Date(Date.now() + 60 * 1000 * 10), // 10 minutes
        });
    }
    return NextResponse.next();
}

​

Answer 1

经过一些修改和清理，我认为这将是足够有效的。我在函数之外定义了变量，不对每个请求进行声明。还发现，对于重复检查，set数据类型将比数组高效得多。(came from this answer)。

​

import { NextResponse } from "next/server";
import {
    generateAccessToken,
    verifyRefreshToken,
} from "../_operations/jwt/jwt";
interface Cookies {
    cookies?: {
        refresh_token_extreme?: string;
        access_token_extreme?: string;
    };
}
const baseUrl: string = "http://localhost:3000";
const openPaths: Set<string> = new Set([
    `${baseUrl}/login`,
    `${baseUrl}/signup`,
    `${baseUrl}/forgotPassword`,
    `${baseUrl}/favicon.ico`,
    `${baseUrl}/vercel.svg`,
    `${baseUrl}/_next/webpack-hmr`,
    `${baseUrl}/attachables/campus-images/image1.jpg`,
    `${baseUrl}/attachables/campus-images/image10.jpg`,
    `${baseUrl}/attachables/campus-images/image15.jpg`,
    `${baseUrl}/attachables/mnhs-images/logos/login_logo.png`,
    `${baseUrl}/attachables/mnhs-images/logos/mnhs_favicon_og.ico`,
]);
const openApiPaths: Set<string> = new Set([
    `${baseUrl}/api/login`,
    `${baseUrl}/api/signup`,
    `${baseUrl}/api/forgotPassword`,
]);
const openDynamicPaths: string[] = [`${baseUrl}/forgotPassword/`];
const openDynamicApiPaths: string[] = [
    `${baseUrl}/api/verification/`,
    `${baseUrl}/api/forgotPassword/`,
];
export default async function (req: {
    url?: any;
    cookies?: any;
}): Promise<NextResponse | void> {
    const { cookies }: Cookies = req;
    const url: string = req.url;
    const refreshToken: string | undefined = cookies?.refresh_token_extreme;
    const accessToken: string | undefined = cookies?.access_token_extreme;
    
    if (openApiPaths.has(url)) return NextResponse.next();
    if (url.includes(openDynamicApiPaths[0]) || url.includes(openDynamicApiPaths[1])) return NextResponse.next();
    if (url.includes(openDynamicPaths[0])) return NextResponse.next();
    if (!refreshToken && openPaths.has(url)) return void 0;


    if (!accessToken && !refreshToken)
        return NextResponse.redirect(`${baseUrl}/login`);
    if (!accessToken && refreshToken && openPaths.has(url)) {
        const verifiedToken: any = await verifyRefreshToken(refreshToken);
        const newToken: string = await generateAccessToken(verifiedToken);
        return NextResponse.redirect(`${baseUrl}`).cookie(
            "access_token_extreme",
            newToken,
            {
                httpOnly: true,
                secure: true,
                sameSite: "strict",
                path: "/",
                expires: new Date(Date.now() + 60 * 1000 * 10), // 10 minutes
            }
        );
    }
    if (!accessToken && refreshToken) {
        const verifiedToken: any = await verifyRefreshToken(refreshToken);
        const newToken: string = await generateAccessToken(verifiedToken);
        return NextResponse.next().cookie("access_token_extreme", newToken, {
            httpOnly: true,
            secure: true,
            sameSite: "strict",
            path: "/",
            expires: new Date(Date.now() + 60 * 1000 * 10), // 10 minutes
        });
    }
    return NextResponse.next();
}

​