인프런 커뮤니티 질문&답변
작성한 질문수
백엔드 토큰 저장 위치
작성
·
703
0
안녕하세요 제로초님!
1) 백엔드에 데이터 요청 시 필요한 쿠키(로그인 후 발급되는 액세스토큰)을 브라우저에 저장해서 사용해야한다고 하셨고, 저 또한 이전에 리액트로만 개발했을 때 그렇게 진행했었는데요,
next.js가 아직 서툴고 next-auth의 역할이 완전이 이해가 되지 않아서 조금 헷갈리는 부분이 있습니다. 저는 백엔드에서 발급해준 액세스토큰을 auth.ts jwt callbacks를 통해 user값에서 가져와 token에 저장한 뒤, session callbacks에서 이 token을 session에 저장해 놓았고 만료된 토큰 갱신하는 로직까지 callbacks에서 설정해놓았는데요. 이렇게 구현을 해도 되는 건가요? 보안에 문제가 있을까요?
만약 쿠키에 저장해서 사용하는 방식으로 바꿔야한다면 만료된 토큰의 갱신처리 즉 refreshToken요청 코드는 어디에 작성을 해야하나요..? (리액트에서는 axios를 사용해서 axios.interceptor.response에서 401 jwt만료 에러가 발생시에 refreshtoken을 요청하는 방식으로 구현했었습니다.)
2) 그리고 회원가입과 같은 POST 요청시에 form action을 이용해 server action을 사용하는 것과 form onsubmit으로 post 요청하는 것과 어떤 차이가 있는 건가요..? server action으로 post 요청시 넘겨주는 formData를 찍어보면 JSON형식이 아니라 백엔드에서 type오류가 넘어오는데 server action을 사용하려면 백엔드도 같이 설정을 해줘야하나요?
답변 1
0
일단 그렇게는 하셔도 될 것 같은데요. 궁금한 점은 그럼 브라우저에서는 백엔드로 요청을 어떻게 보내나요? 백엔드 토큰이 필요할텐데요. 백엔드 토큰이 프론트서버 세션에 저장되어 있는 것 같은데, 그걸 브라우저로 내려주고 있나요?
서버액션으로 하면 브라우저->프론트서버이고, onsubmit으로 하면 브라우저->백엔드 서버입니다. 백엔드에서 따로 하실 건 없습니다만 백엔드로 넘길 수 있는 데이터의 형식은 제한이 있긴 합니다.
export default function Page() {
async function createInvoice(formData: FormData) {
'use server'
const rawFormData = {
customerId: formData.get('customerId'),
amount: formData.get('amount'),
status: formData.get('status'),
}
// mutate data
// revalidate cache
}
return <form action={createInvoice}>...</form>
}이 부분은 저도 연구를 좀 해보겠습니다. 저도 브라우저에서 백엔드&프론트 토큰 둘 다 들고있는 게 불편해서 통일하려고 하고는 있거든요.
근데 쿠키가 아니라 토큰 방식을 사용한다면 매번 요청 전에 서버로부터 백엔드 토큰 받아와야해서 귀찮긴 하네요(useSession이 해주긴 하겠지만). useSession 값이 있을 때만 요청을 보내도록 하시는 건 어떤가요? react-query 사용한다면 enabled 속성으로 useSession 값이 있을 때만 보낼 수 있습니다.
네 맞습니다. 백엔드로 권한이 필요한 데이터 요청시에 헤더 Authorization에 넣을 백엔드 토큰을 프론트서버 세션에서 가져와 사용하려고 했었습니다. (로그인시 응답으로 받은 백엔드 토큰을 callbacks에서 세션에 저장했었습니다.)
그리고 server component에서 @/auth로 세션에 저장된 토큰을 가져올 때 이미 만료된 백엔드 토큰이 그대로 조회되는 문제가 있습니다. jwt callbacks에서 토큰이 업데이트 되었지만 이게 반영이 안 되는 것 같아보입니다.
음.. 기존대로 브라우저 쿠키에 백엔드 토큰을 저장하는 방식으로 가야하나봅니다... ㅠㅠ
2. 답변 감사합니다!