nextjs 14 에서 토큰 관리 방법이 뭐가 있을까요?

Question

nextjs와 react를 처음 공부하고 현재 간단한 웹 사이트 하나 만들고 있습니다.간단하게 로그인 페이지에서 로그인을 하게 되면 서버로부터 token을 발급 받고 그걸 보관해 두고 싶습니다.그 이유는 앞으로 통신 때 마다 토큰을 헤더에 담아서 통신하기 위함인데요.nextjs를 공부할 때는 와 이거 좋다 했는데 생각보다 쓰려니 쉽지 않네요;;;(웹 프론트가 처음이라 그런가)쿠기를 사용하자니 보안 문제 때문에 걸리고,로컬 스토리지를 쓰자니 ssr에서는 접근할 수 없고. 그렇다고 전부 use client 를 넣어줄 수도 없고상태 관리 라이브러리는 ssr에서 불가하고어떤 방법을 가장 많이들 쓰는 방법이실까요?통신마다 토큰을 사용하기도 하지만 토큰이 유효하지 않으면 login 페이지로 이동시키게도 해야하거든요.웹 프론트 선배님들 도움 바랍니다.

RWB · Accepted Answer

일단 쿠키든 로컬스토리지든, 반드시 브라우저 저장소가 필요합니다.그게 없이 useState 같은 메모리에서만 관리하면, 새로고침을 할 때마다 세션이 풀립니다.보통은 로컬 스토리지보다, 쿠키를 선호합니다.그리고 쿠키를 사용하는 것이 SSR 환경에서의 토큰 관리에도 용이합니다.SSR 환경에서 브라우저가 가진 토큰을 갖고오는 방법은 크게 두 가지가 있습니다.전술했듯이, 쿠키 사용을 기준으로 합니다.1 . 백엔드에 쿠키 속 토큰을 반환하는 API를 만든다.쿠키의 특징은, API 요청 시 요청에 담겨 같이 날아간다는 특징이 있습니다.이를 통해 서버에 요청을 보내면, 서버가 헤더의 쿠키를 읽고, 토큰을 반환해주는 API를 구현하시면 됩니다.SSR 상에서 사용할 API이므로, 클라이언트 상에 노출되지 않습니다.2 . Next.js 미들웨어를 사용하여, 나가는 요청에 토큰을 붙여준다.미들웨어를 통해, 발생한 요청에 추가적인 작업을 해줄 수 있습니다.미들웨어 상에서 요청 객체를 호출하여 요청 시 담긴 쿠키를 읽을 수 있습니다.해당 쿠키를 Authorization 등, 원하는 헤더에 담아서 보내는 방법입니다.이 역시 SSR 영역이므로, 클라이언트 상에 노출되지 않으며, 백엔드 API를 만들 필요가 없습니다.전술한 내용 말고도, 여러 방법이 있을 수 있습니다.

kim · Answer

흠.. 쿠키 안쓰는 인증된 페이지 SSR 은 불가능하다고 생각하는데.. 혹시 해결하신분? 없을텐데, 정말 있을까 궁금..

하얀뼈 · Answer

오잉 httpOnly 쿠키도 보안 문제가 있나요...?

nextjs 14 에서 토큰 관리 방법이 뭐가 있을까요?

3개의 답변

#token 목록