-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
강좌 범위는 아니지만요...
20.10.01 22:46 작성 조회수 200
2
스벨트로 프로젝트를 진행하려고 합니다.
vue 학습을 진행하다
스벨트에 매료되어 스벨트를 하려고 하는데
jwt 인증과 관련된 자료를 찾기 힘드네요...
대부분 firebase 와 연동하여 진행하는 내용들입니다.
백엔드는 파이썬 flask오 rest api로 구현하였는데
스벨트에서는 어떤 방향이 좋을까요?
답변을 작성해보세요.
1
1
이효범(Beomy)
지식공유자2020.10.01
안녕하세요. :)
이런 우연이 있을까 싶습니다! 백엔드는 Node.JS, 프론트엔드는 Svelte로 다음 강의를 촬영하고 있습니다.(강의는 다음달에 오픈 할 수 있을 것 같습니다.) 사용자 인증은 JWT를 사용합니다. 해서, 조금은 도움이 될 수 있을 법한 답변을 드릴 수 있을 것 같습니다.
JWT를 사용해 본 결과, JWT는 단순히 인증 방식이라 백엔드로 무엇을 사용하건, 프론트를 무엇을 사용하건 상관없이 어디든 사용이 가능합니다.
준비 중인 강의에서는 백엔드 Node.JS에서 jsonwebtoken이라는 npm 라이브러리를 사용해서 토큰을 생성하고 프론트에 전달합니다.
프론트에서는 백엔드에서 전달받은 토큰을 로컬스토리지에 저장해서 로그인을 유지 시켜줍니다. JWT 토큰이 만료되면 로컬스토리지에서 삭제해주고요. jwt-decode라는 npm 라이브러리를 사용해서 토큰을 디코딩에 만료시간과 기타 정보를 가져올 수 있습니다.
프론트에서 API를 요청할 때 HTTP 요청 해더에 토큰을 담아 API를 백엔드로 전달합니다. 백엔드에서는 jsonwebtoken 라이브러리의 verify를 통해 유효성 체크를 진행하고, 유효하지 않다면 에러를, 유효하다면 HTTP 요청에 응답합니다.
결론은,
1. 토큰의 생성, 유효성 체크는 백엔드에서 이루어진다. (jsonwebtoken 사용)
2. 프론트의 로컬스토리지에 토큰을 저장해서 로그인을 유지시켜준다.
3. 토큰 만료시 로컬스토리지에서 삭제한다. (jwt-decode로 만료 시간 확인)
4. 프론트에서 백엔드로 API를 요청할 때 토큰을 HTTP 요청 해더에 담아서 보낸다.
이렇게 정리할 수 있을 것 같습니다.
혹시 답변을 확인하시고 더 궁금한 사항이나, 이해가 안가는 부분은 추가 질문 주세요. :)
답변 2