쿠키 인증

강준호·2024년 2월 13일

리액트

목록 보기
15/18

로그인 회원가입 하면 json 으로 줌. 엑세스 토큰이 들어있는.

엑세스 토큰이 여권과 같은거라서 헤더에 setHeader 에 박아놨었음.

근데 좀 더 보안 신경 쓸 수 있게 쿠키방식으로 변화함.


쿠키

  • 한우나 돼지에 1등급 찍듯이 알아서 인증되는.

  • 프론트엔드 개발할때는 신경 안써도됨. 로그인,회원가입때는 이게 알아서 되거든.

  • 최초에 홈페이지에 보여줄때 쿠키가 있으면 로그인 상태로 바꿔줘야. 근데 보안상으로 내가 도장이 찍혀있는지 모르기 때문에 서버에 물어봐야해.

  • 서버가 ok 라고 하면 로그인 시켜주면됨.

response 로 꺼내는 작업 안해도됨. 도장이 알아서 찍히니까

엑시오스 만들때
axios.create(
baseUrl: 000,
withCredentials:true) 로 설정해야해.

서버에 나 도장찍혀있는지 물어보는 엔드포인트는

  • refreshtoken.

  • isRefreshToken 해서

  • 내가 도장이 찍혀있으면 토큰 새롭게 발급하면서 true 로.

  • 가능한 바깥 provider 나 auth context 같은 useEffect 로 마운트될때 딱 한번만 하면됨. or useQuery로 . 최초에 서버에 가서 리프레쉬 한번만 보내고 와라.

API 같은걸 만든 다음에. 루트 레이아웃에는 use client 쓰면 안되니까 providers 레이아웃에 래퍼 컴퍼넌트 AuthProvider 안에다가 useEffect 같은거 하나 작성해서

useEffect( => api.auth.refreshToken()) 한번 하면됨. 이거의 결과값을 true /false 로.

디폴트가 false 니까 건드 x 해도됨.


로그인 결과값에 응답 헤더에 set-cookie 에 엑세스 토큰이 실려서와. 근데 여기있는 엑세스 토큰 못꺼내. 서버에서 베어러 토큰 쳐다도 안보게 해놔서 쿠키로 작업을 해야해.

어플리케이션에 쿠키가 있어. 쿠키 안에 엑세스 토큰이 들어가 있어. 엑세스 토큰을 가지고 요청을 했으니, 해당 유저에 맞는 카트를 갔다줌.

쿠키가 있는 채로 새로고침하면 refresh token 이 있고,result 가 true 로 오고, 로그인 true 로 바꿔주면돼.

0개의 댓글