찍찍이 #미들웨어 설정

브라우저에서 헤더를 통한 토큰을 가져와 쿠키로 저장하게 끔 만들었음.

따라서 Nextjs의 middleware에서 브라우저 쿠키를 이용한 리다이렉션 처리를 하였음.

우선 src 폴더 안에 middleware.ts 파일을 생성.

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

export const config = {
 matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)'],
};

const AUTH_PAGES = ['/signup', '/signin'];

export const middleware = async (request: NextRequest) => {
 const { nextUrl, cookies } = request;
 const { pathname } = nextUrl;
 const token = cookies.get('token');
 
 if (AUTH_PAGES.some((page) => pathname.startsWith(page))) {
   if (token) {
     return NextResponse.redirect(new URL('/dashboard', request.url));
   }
   return NextResponse.next();
 }
 
 if (!token) {
   return NextResponse.redirect(new URL('/signin', request.url));
 }

 return NextResponse.next();
};

matcher 설정을 통해 미들웨어 적용될 경로를 정의 (예외 처리)

로그인, 회원가입 경로를 정의

만약 로그인, 회원가입 페이지로 이동 시 토큰이 존재한다면 메인 페이지로 이동

토큰이 만료 및 없다면 로그인 페이지로 이동

• Next.js 미들웨어를 활용하여 인증 기반 페이지 접근 제어를 구현.
• 클라이언트 요청을 사전에 처리함으로써 성능을 최적화하고,
• 중앙화된 인증 로직 관리로 유지보수성을 향상.
• 또한, 토큰 검증을 통해 보안성을 강화하여 비인가 접근을 차단하고, 사용자 경험을 개선

위 영상은 토큰을 제거했을 때 다시 홈페이지로 이동 시 리다이렉션 처리