[Next@14] middleware

개요

• 기존 유저 인증 관련하여 auth.js 를 쓰다가 로그인 성공 시 redirect가 정상적으로 이루어지지 않는 버그 ( 버전 자체 버그같다 [이슈 참고] ) 및
  서버&클라이언트 관련한 여러 이슈로 (auth.ts로직은 서버에서 이루어지기 때문에 브라우저를 이용한 상태 관리에 더 익숙한 나에게 너무 고난의 연속이었다..^^) 로직이 너무 복잡해지는 것 같아 결국 걷어내는 작업 진행
• next-auth 제거 후, 로그인 시 헤더 쿠키로 전달된 토큰 값은 유저 브라우저에 쿠키로 저장,
  유저 정보는
  1. localStorage (새로고침 시 refresh 되는 전역 store 상태를 유지하기 위함)
  2. 전역 store에 저장
• next.js 기능인 middleware.ts 을 이용해 유저 상태에 따라 페이지 접근 권한을 관리하기로

*공식 문서 참고

작업

1. 로그인 한 상태라면 로그인, 회원가입 페이지 접근X -> /home 으로 redirect
2. 반대로 로그인 안 한 유저라면 그 외 모든 페이지 접근 불가 -> /login 으로 redirect

import { NextRequest, NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { setHeaderToken } from './func/fetchCall'
export async function middleware(request: NextRequest) {
  const cookieStore = cookies()
  const accessToken = cookieStore.get('accessToken')
  //쿠키에 저장된 accessToken 값 여부 확인
  if (!accessToken) {
    return NextResponse.redirect('/login') // 없다면 미로그인 상태로 인지
  }
  setHeaderToken(accessToken + '')
  if (
    request.nextUrl.pathname.startsWith('/login') || 
    request.nextUrl.pathname.startsWith('/createAccount')
  ) { // 요청 url이 Login이거나 createAccount일 경우 && 토큰값이 있다면 
	  // 로그인된 상태로 인지, Home 으로 redirect
    if (accessToken) return NextResponse.redirect('/home') 
  }
}

export const config = {
  matcher: [
    '/',
    '/profile/:path*',
    '/home/:path*',
    '/explore/:path*',
    '/messages/:path*',
    '/member/:path*',
    '/mypage/:path*',
    '/notifications/:path*',
    '/record/:path*',
    '/recruit/:path*',
    '/login',
    '/createAccount',
  ],
}