Nextjs의 middleware에서 Laavel Sanctum의 인증을 통과하는 방법

하고 싶은 일

넥스트js의 중간부품을 사용하려면 LaavelSanctum(SPA 인증)의 로그인 여부 판정에 따라 분배합니다.

막힌 곳

고객 측의 요청이 있을 경우 로그인 후 SET-COOKIEE의 응답이 되돌아오는 것을 포함하기 때문에 일단 로그인하면 인증 정보를 옮기는 것에 특별히 신경 쓰지 않는다.
브라우저에서 요청한 것이 아니라 node 서버에서api 서버로 보낸 요청에 대해 아무것도 하지 않으면 산텀에 요청이 들어오기 때문에 산텀이 검사할 인증 정보를 적절히 지정해야 한다.

메서드

apiServer.ts

import axios from "axios";

export const apiServer = axios.create({
    baseURL: process.env.API_ENDPOINT,
    responseType: 'json',
    withCredentials: true,
    headers: {
        "Content-Type": "application/json",
    }
})

pages/_middleware.ts

import {NextFetchEvent, NextRequest, NextResponse} from "next/server";
import fetchAdapter from "@vespaiach/axios-fetch-adapter";
import {apiServer} from "../../utils/apiServer";

export default async function middleware(req: NextRequest, ev: NextFetchEvent) {
    apiServer.defaults.adapter = fetchAdapter
    const {data} = await apiServer.get('http://web:80/api/auth/me', {
        headers: {
            Cookie: req.headers.get('cookie') ?? '',
            referer: req.headers.get('referer') ?? ''
        }
    })

    if (!data.authenticated) {
        return NextResponse.redirect(`${process.env.APP_URL}/auth/login`)
    }
    return NextResponse.next()
}

아래 기사에서 설명한 바와 같이 산텀을 이용해 인증하는 경우 라벨 측에서 쿠키에 포함된 정보 외에 리퍼러도 검사하기 때문에 최소한의 쿠키와 리퍼러를 제목에 설정해야 한다.
https://qiita.com/ucan-lab/items/3e7045e49658763a9566