이번 강의에서는
JWT 토큰을 수락하고 백엔드 서버에게 보내는
후속 요청들에서 같은 토큰을 보낼 때 필요한
UI와 관련된 변경 사항을
빠르게 진행해 보도록 하겠습니다
변경 사항을 위해 우선
실제 로그인 호출이 발생하는 곳으로 이동해야 합니다
login.component.ts이라는
해당 파일을 먼저 열어 주시고
여기 안에는 validateUser라는 메소드가 있습니다
해당 validateUser 메소드 안에
엔드 유저의 성공적인 인증 이후에
이 responseData 안에 모든 응답을 받게 될 것입니다
그리고 해당 responseData로부터
Authorization 라는 이름으로 된 헤더를 읽어야합니다
따라서 코드를 한 줄을 작성해 주겠습니다
여기 보시다시피
방금 작성한 코드가 여기 있습니다
우선 null이 아니라면
Authorization 라는 이름의
헤더 값을 가져오려 하는 것입니다
그리고 sessionStorage 안에
아이템 이름을 Authorization 로 저장합니다
따라서 이 코드는 최초의
성공적인 로그인 과정 이후
받게 되는 JWT 토큰을 읽게 하는 것입니다
이제 헤더 이름이 Authorization인
요청으로 같은 JWT 토큰을 보내야합니다
우리는 모든 종류의 요청에 대해 보내고 싶기 때문에
가장 적합한 곳은
여기 있는 interceptor 클래스입니다
app.request.interceptor.ts인
해당 파일을 열어보면
특히 비밀번호가 null이 아닌 로그인 과정 중에
여기 있는 if 블록 속에
이러한 ID, 비밀번호를
Authorization 헤더의 일부로 보내는 것입니다
하지만 우리는 해당 값들을 Basic으로 보내고
ID과 비밀번호의 Basic64 형식으로 보냅니다
하지만 이러한 정보를 전송한다는 것은
로그인 도중에 보낸다는
전제 하에 괜찮습니다
하지만 모든 후속 작업은
JWT 토큰을 전송해야 합니다
이를 위해
여기에 else 블록을 써줍니다 해당 else 블록 안에
이미 코드 몇 줄을 적어 놓았습니다
첫 줄에서는
Authorization라는 이름의 아이템을 가진
sessionStorage 에서 온 JWT 토큰을 읽으려고 하는 것입니다
이후에 인가 값이 null이 아니라면
sessionStorage에서 받은 것과
같은 인가 값을 보내게 됩니다
따라서 여기 보이는 해당 인가 값은
단지 sessionStorage에
이와 같은아이템 이름으로 저장된 JWT 토큰일 뿐입니다
따라서 요청 헤더의 일부로 보내는데
헤더의 이름은 Authorization입니다
이로써 클라이언트에 대한
변경 사항들도 전부 마쳤습니다
다음 수업에서는
애플리케이션에 로그인하고
UI 애플리케이션의 다른 안정된 API와 작업하여
이러한 JWT 변경 사항들을 검증해보도록 하겠습니다
다음 수업 때 진행될 이러한 테스트에 대해
기대하고 계시길 바랍니다
그럼 다음 강의에서 뵙겠습니다
감사합니다