jwt SSR시 어떻게 해줘야할지 잘모르겠습니다.
974
작성한 질문수 17
선생님 안녕하세요. 저는 로그인을 JWT로 해주었는데요.
SSR로 하면서 로그인 인증에 문제가 있어서 질문글을 남깁니다.
현재 저의 로그인,인증 방식은 이렇습니다.
로그인 요청> 백엔드에 post 요청 > 응답온 refreshToken은 쿠키에 저장, accesToken은 json으로 받아 saga에서 axios.default.header.common["x-access-token"] 에 넣어줘서 api 요청 콜마다 헤더에 accessToken을 넣어주었습니다. 그런데 ssr로 변환시 기존 페이지에서
getServerSideProps에서 context.store.dispatch로 제 정보를 요청할때 me 값을 제대로 가져오지 못합니다.
로그인 성공시 me 값에 accessToken이 들어가고 /profile 페이지 방문시 페이지 렌더링전에 액션을 디스패치하여 백엔드에 accessToken을 헤더값에 넣어 요청해 받은 값을 디코드해서 me 값에 넣어줍니다. 그럼 제 정보가 담겨있는데 현재는 로그인 성공시 me값에 accessToken이 들어있다가도 그다음 __NEXT_REDUX_WRAPPER_HYDRATE__라는 액션이 실행되면 초기화 됩니다 .
답변 3
2
ssr 시에는 login이 호출되지 않으니 axios.default.header.common["x-access-token"]도 호출될 일이 없어서 저장이 안 되는 것입니다. getServerSideProps 안에서 axios.default.header.common["x-access-token"]가 호출되는 상황을 만드셔야 합니다.
x-access-token을 쿠키에 넣고 프론트 서버에서 쿠키에서 넣은 토큰을 꺼내서 axios.default.header.common["x-access-token"]를 호출해야 할 것 같습니다.
0
csrf는 어차피 따로 방어해야 합니다. 쿠키를 쓰는 서비스든 아니든요.
getServerSideProps에 데이터를 보낼 수 있는 방법이 쿠키를 제외하고 또 있나를 찾아봐도 됩니다.
0
아... 저도 그방법을 생각해봤는데 "쿠키에 access token이나 세션 id 인증 정보를 저장한다면 CSRF 공격으로 API 콜을 해커가 요청하면 쿠키가 서버로 자동으로 보내지기 때문에 공격자는 유저 액션 수행할 수 있다" 라고 하는 글을 읽어 봐서 최대한 피하려고 했거든요 어쩔수 없는걸까요??
넥스트 버젼 질문
0
75
2
로그인시 401 Unauthorized 오류가 뜹니다
0
88
1
무한 스크롤 중 스크롤 튐 현상
0
172
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
95
2
인라인 스타일 리렌더링 관련
0
90
2
vsc 에서 npm init 설치시 오류
0
146
2
nextjs 15버전 사용 가능할까요?
0
158
1
화면 새로고침 문의
0
120
1
RTK에서 draft, state 차이가 있나요?
0
152
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
348
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
372
1
sudo certbot --nginx 에러
0
1271
2
Minified React error 콘솔에러 (hydrate)
0
469
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
246
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
325
1
npm run build 에러
0
517
1
front 서버 npm run build 중에 발생한 에러들
0
381
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
336
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
284
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
236
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
200
1