캠프 5주 2일차

도마스묵의 개발일지·2021년 8월 3일
0

부트캠프(개발_시작)

목록 보기
19/26
post-thumbnail

Day-30

프로그래밍을 배우기 전까지는 웹사이트나 게임에 원하는 기능없으면 "왜 이걸 추가 안하지??" 라고 단순하게 생각했었는데 막상 공부를 하고나니 결코 쉬운것들이 아니였고,특히나 로그인 기능은 물론 얕게 배웠지만 어려운 기능인 것같다.

1. 로그인 프로세스

1.로그인 프로세스

로그인을 할때는 Backend 메모리 세션에 유저정보를 저장하는 것이 아니고 DB 유저 인증 정보테이블에 저장된다. 이정보를 토큰으로 관리하고 Jwt token 을 사용 accessToken을 반환 해서 사용자 인증 하게된다.

1-1 로그인 실습해보기

로그인 창을 만들고 console.log로 accessToken을 확인 한다.


토큰을 Jwt token 에 가서 넣으면 정보를 알 수 있다.


누구나 토큰만 넣으면 내용을 볼 수 있기때문에 보안 취약
그렇기 때문에 중요한 정보 저장 x
하지만 정보를 위조하려면 백엔드에 있는 고유한 키가 필요하다.

이부분에 access token을 넣어 줘야한다.

_app.tsx에 Http 공식
'Bearer(이 이름으로 토큰을 주고 받는걸로 약속 되어있음) 엑세스토큰' 을 넣어줘야하는데
contextAPI 를 이용 해야한다.

createcontext

usecontext

어디서든 accessToken을 쓸 수 있게 여기 만들어 줌

⌦오타 authentication : authorization

▶︎ 결과 확인
로그인 했다는 성공 페이지를 만들어 주고
성공시 use라우터 실행 페이지가 이동하게 설정 해준다.


▶︎로그인 안했을 시
(AccessToken이 없는 사람)
useEffect 이용해서 accessToken이 없으면 화면이 다시 그려질때 라우터로 로그인 화면이 전환되게 해준다.

결론

다시 이해한 과정을 쉽게 설명하자면...
Backend 는 어떤 사람이 API를 요청했는지 알 수 없다.
따라서 유저의 모든 API 요청에는 accessToken 을 함께 보내준다.
(HTTP 헤더 http request)에 Authorization에
Bearer 방식으로 access토큰을 입력 해 줘서 유저를 인증한다.
accessToken이 JWT(Json-Web-Token)이기 때문에 가능한 일 로그인 화면에서 로그인을 하여 받게되는 accessToken을 GlobalContext를 통해 _app.tsx에 state로 저장하였고,ApolloClient에서 header 설정에 accessToken을 추가했습니다.(모든 graphql-api요청시 accessToken을 함께 보내주도록 설정)

0개의 댓글