Next js 中响应为 401 时重定向到登录页面

Question

我使用 next js 中间件，仅在

middleware.ts

中没有可用令牌时将用户重定向到登录页面：

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

export function middleware(request: NextRequest, response: NextResponse) {
  const token = request.cookies.get("token");

  //   if (token && !request.nextUrl.pathname.startsWith("/")) {
  //     return Response.redirect(new URL("/", request.url));
  //   }

  if (!token && request.nextUrl.pathname.startsWith("/account")) {
    return Response.redirect(new URL("/login", request.url));
  }

  if (!token && request.nextUrl.pathname.startsWith("/new")) {
    return Response.redirect(new URL("/login", request.url));
  }

  if (!token && request.nextUrl.pathname.startsWith("/process")) {
    return Response.redirect(new URL("/login", request.url));
  }

  if (request.nextUrl.pathname.startsWith("/login") && token) {
    return Response.redirect(new URL("/", request.url));
  }
}

export const config = {
  // matcher: [
  //   "/((?!api|_next/static|_next/image|.*\\.png|.*\\.webp|.*\\.woff2|.*\\.svg$).*)",
  // ],
  matcher: "/((?!api|static|.*\\..*|_next).*)",
};

我还使用 axios 拦截器在

401

中获得状态

_app.tsx

时删除 cookie，如下所示：

import { deleteCookie } from "cookies-next";

export const logout = () => deleteCookie("token", { secure: true });

axios.interceptors.response.use(
  (res) => res,
  async (err) => {
    const status = err.response && err.response.status;
    if (status === 401) {
      logout();
      return Promise.reject(err);
    }
    return Promise.reject(err);
  }
);

现在我想在 api 中出现

401

状态时将用户重定向到登录页面，但不知道如何在

_app.tsx

中做到这一点。

如何将用户从 axios 拦截器函数内的

_app.tsx

重定向到登录页面？

Answer 1

import { NextResponse, NextRequest } from 'next/server'
 
// This function can be marked `async` if using `await` inside
export function middleware(request: NextRequest) {
  // Use redirect method to redirect user to login page
  return NextResponse.redirect(new URL('/login', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

查看完整的文档