자바스크립트 개발자 포럼일단 기본적으로 api주소로 접근했을때 json형태로 뿌려주는 것까지 막고자 해서,로그인기능의 passport 말고도 jwt를 이용하여 api접근시에 접근불가 코드를 넣으려고 짜는중입니다. 그런데 문제가 되는게 발급해준 토큰을 어떻게 유지 시키느냐가 문제인데요… 전체적인 그림이
-
DB에 아이디, 도메인, uuid로 생성한 키값을 넣어줍니다.
-
프론트에서 웹사이트 첫 접근시 토큰을 요청하는 액션을 디스패치 하면서 axios에 아이디, 도메인, uuid로 생성한 난수를 .env에서 가져와서 요청합니다.
-
백에서 아이디 도메인 키값을 받아서 모두 DB에 조회해서 맞다면 jwt를 이용한 토큰값을 생성해서 돌려줍니다.
-
이후 모든 처리(로그인, 게시글리스트, 게시글보기등등…) 의 api요청에 토큰값을 담아 요청하면 모든 api 라우터에서 토큰값이 유효한지의 미들웨어를 통해 에러 / 결과값 리턴등을 해줍니다.
여기서 질문이 2가지정도가 있는데요.
-
대표적으로 새로고침상황에서 토큰값이 초기화되어 다시 토큰을 생성하는 액션을 디스패치 합니다. 이부분을 생각으로는 로컬스토리지, 세션스토리지, 쿠키 세군데중 한군데 저장을 해야할거같은데, 로컬스토리지, 세션스토리지에 저장을 하자니 자바스크립트로 접근이 가능해지고, 쿠키에 저장하자니 httponly옵션을 걸고 저장하는법을 이해를 못했습니다. 또한 httponly옵션을 걸더라도 어떻게 접근해서 쿠키 만료시간을 체크할 방법을 모르겠습니다.
-
지금 로그인, 유저정보 가져오기, 토큰값요청 등의 액션을 구현해놨는데, 문제는 첫 웹페이지 접근시에 토큰값을 요청하는 액션이 돌고 토큰값을 가져와서 다음 액션인 유저정보 가져오기를 구현하고 싶은데(아마 지금의 상태라면 게시글, 게시판리스트 등의 액션에도 동일할거같습니다.) 액션이 동시에 실행되어 토큰값을 받아오기도 전에 유저정보 로드에 토큰값이 null값으로 요청됩니다. 이부분을 어떻게 해결해야할까요?