기존에 로컬스토리지에 저장한 accessToken은 기간이 1시간 남짓이어서 계속 로그인해야하는 불편함이 있었는데 드디어 오랫동안 로그인을 유지할 수 있는 refresh Token을 배웠다!!
오류의 절반은 토큰 만료 였는데 오류 절반 탈출! 이라고 생각하고 refreshToken에 대해 알아보자
RefreshToken
로컬스토리지에 저장된 accessToken은 아래 사진과 같이 인증과 인가과정을 거치는 것이었다.
하지만 로컬스토리지에 저장된 accessToken은 유효기간이 너무 짧아 유효기간이 긴 refreshToken을 적용하기 위해서는 jwt를 하나 더 만들어야한다.
글로벌스테이트에 저장하는 payload에는 accessToken이 들어가고 백엔드와 교류가 가능한 cookie에는 refreshToken을 넣어준다.
cookie 보안 강화를 위해 httpOnly와 secure를 사용해야 한다.
httpOnly는 document.cookie와 같이 값을 쉽게 가져오지 못하게 하는 것(=브라우저에 접근 불가)이며,
secure는 https만 가능하게 하는 것이다.
이렇게 위의 사진과 같이 인증과정을 거치게 되고
인증과정 끝나면 name, price 등 Bearer accessToken과 함께 보내주면 백엔드에서 받은 jwt는 복호화해서 로그인 여부를 판단하는 인가과정을 거친다.
근데 여기서 토큰 만료로 인한 에러(Unauthenticated) 발생시
- 아폴로셋팅에서 에러를 캐치해주기(onError)
- refreshToken을 활용해 백엔드에서 accessToken이 재발급 받기(restoreAccessToken)
- 재발급 받은걸로 상품등록 재시도
이렇게 사용자는 모르지만 조용히 3단계를 거쳐 다시 로그인 되는 것을 silent-auth라고 부른다.
- 엑세스토큰이 만료되었을때만 하는 것이다!(매번하는거아님)
graphql = rest ??
graphql을 여태 rest와는 아예 다르다고 생각했지만
알고보니 graphql은 rest api의 post 방식인 것으로 확인되었다!
axios의 엔드포인트가 graphql의 함수들이 들어간 것이며
덕분에 많은 장점을 가진다.
- 수많은 엔드포인트 단일화(실행할 함수를 객체형태로 담아서 보낼 수 있음)
- rest-api의 언더패칭 문제 해결
- rest-api의 오버패칭 문제 해결
