서버 액션를 통한 API 통신 시 쿠키 제어
197
3 asked
안녕하세요. 강의를 보면서 NextAuth 없이 fetch 을 커스텀 함수로 구현 후 서버 액션에서만 호출하는 방식으로 구현해보고 싶어서 진행하고있습니다.
로그아웃 기능을 구현 중 토큰이 만료되었을때(API 호출 시 401 오류 발생으로) 쿠키를 제거하는 로직을 추가하였는데, 서버 액션에서만 가능하다는 오류가 발생합니다. 수동으로 로그아웃시에는 정상적으로 토큰이 제거되고, 정상적으로 로그인 페이지로 이동됩니다..
정확한 상황은 페이지 진입 시 토큰 만료된 경우 middleware 에는 토큰이 있기때문에 페이지에 진입되고, API 호출 시 401 오류가 발생하고 쿠키 삭제 후 로그인 페이지로 리다이렉트되는데, 이때 middleware 상에는 토큰이 존재합니다..
보통 자동 로그아웃 시 middleware 에서 쿠키 만료기간을 확인하고 제거하는 방식을 사용하는지, 저와 같이 해도 정상적으로 동작되어야하는건지 어떻게 접근해야될지 모르겠습니다 ㅠㅠ
Answer 2
0
jwt토큰은 아니고, 로컬에 간단히 구성해놓은거라 메모리상에만 존재하는 값입니다!
쿠키 삭제 로직은 커스텀 fetch 함수안에 있고, 해당 파일은 ‘use server’ 입니다!
데이터 패칭은 모두 서버 컴포넌트에서 하고있습니다!
혹시 서버를 거쳐서라는 말이 NextAPI 말씀하시는걸까요? 해당 방법도 해봤는데, 서버 액션상의 환경과 NextAPI 환경이 다른건지 등록된 쿠키가 없다고 나옵니ㅏ.. middelware 에는 계속 존재하구요!
0
아래와 같이 서버 컴포넌트에서 호출하고있습니다!
import CilentComponent from './_component/CilentComponent'
import { getList } from '@/api'
export default async function Page() {
const data = await getList()
return <CilentComponent data={data} searchParams={searchParams} />
}
0
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
}
}
0
https://nextjs.org/docs/app/api-reference/functions/cookies
여기서 cookies.delete는 서버액션이나 라우트핸들러에서 호출하라고되어있습니다. 지금 상황에서는 라우트핸들러를 만드셔서 거기로 요청을 보내시는 게 적합할 것 같습니다.
참고로 redirect또한 try/catch 바깥에서 호출하셔야 합니다.
0
하나 궁금한 점이 혹시 토큰이 jwt 토큰인가요? jwt 토큰이면 미들웨어에서 유효기간을 미리 검사할 수 있을 겁니다. jwt 토큰이 아니라면 서버를 거쳐서 서버에서 401을 되돌려주겠지만요. 401이 뜬 후 쿠키 삭제하는 로직은 어떤 컴포넌트에 있는 건가요?
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
171
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
98
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
230
2
fetch 캐싱과 revalidate 관련
0
84
2