인프런 커뮤니티 질문&답변
작성한 질문수
서버 액션를 통한 API 통신 시 쿠키 제어
24.09.11 18:39 작성
·
56
0
안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다.
로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다..
정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다..
보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ
답변 2
0
2024. 09. 11. 18:56
jwt토큰은 아니고, 로컬에 간단히 구성해놓은거라 메모리상에만 존재하는 값입니다!
쿠키 삭제 로직은 커스텀 fetch 함수안에 있고, 해당 파일은 ‘use server’ 입니다!
데이터 패칭은 모두 서버 컴포넌트에서 하고있습니다!
혹시 서버를 거쳐서라는 말이 NextAPI 말씀하시는걸까요? 해당 방법도 해봤는데, 서버 액션상의 환경과 NextAPI 환경이 다른건지 등록된 쿠키가 없다고 나옵니ㅏ.. middelware 에는 계속 존재하구요!
2024. 09. 11. 19:57
아래와 같이 서버 컴포넌트에서 호출하고있습니다!
import CilentComponent from './_component/CilentComponent'
import { getList } from '@/api'
export default async function Page() {
const data = await getList()
return <CilentComponent data={data} searchParams={searchParams} />
}
2024. 09. 11. 20:04
getList 는 아래와 같이 GET 커스텀 패치 함수를 호출합니다!
대략적으로 파일 내용은 아래와같습니다!
api.ts
import { GET } from './fetch'
export const getList = async () => {
const res = await GET('/list')
return res
}
fetch.ts
import { cookies } from 'next/headers'
import { redirect } from 'next/navigation'
export const GET = (url) => {
try {
const response = await fetch(url, {
method: 'GET',
headers: {
...options?.headers,
'Content-Type': 'application/json',
Authorization: getCookies('token') || '',
},
})
if (response.status === 401) {
cookies().delete('token')
redirect('/login')
}
const data = await response.json()
return data
} catch (err) {
throw err
}
}
2024. 09. 11. 22:12
https://nextjs.org/docs/app/api-reference/functions/cookies
여기서 cookies.delete는 서버액션이나 라우트핸들러에서 호출하라고되어있습니다. 지금 상황에서는 라우트핸들러를 만드셔서 거기로 요청을 보내시는 게 적합할 것 같습니다.
참고로 redirect또한 try/catch 바깥에서 호출하셔야 합니다.
0
2024. 09. 11. 18:44
하나 궁금한 점이 혹시 토큰이 jwt 토큰인가요? jwt 토큰이면 미들웨어에서 유효기간을 미리 검사할 수 있을 겁니다. jwt 토큰이 아니라면 서버를 거쳐서 서버에서 401을 되돌려주겠지만요. 401이 뜬 후 쿠키 삭제하는 로직은 어떤 컴포넌트에 있는 건가요?
2024. 09. 11. 19:38
그 커스텀 fetch 파일은 어느 파일에서 호출하나요??