SPA 웹 인증 로직

Question

1년차 중소 SI 백앤드 개발자 입니다. 전공자 &#43;국비를 나왔습니다.개인적 공부로 boot&#43; vue 웹페이지를 만들어 배포까지 계획 중에 있습니다. (회사에서 VUE를 처음배웠습니다)취업 전에는 boot&#43;jsp(혹은 타임리프) /세션 이용해 인터셉터 /컨트롤러 (getSession...) 이런 전형적? 방식으로 구현했었는데 지금은 서버와 클리언트가 독립된 상황이여서. 인증 로직을 고민을 많이 해봤습니다. 일단 둘의 차이도 많이 찾아봤습니다. EX)세션은 DB로직이 필요하다,, 등등여기서 말하는 클라이언트와 서버는 VUE와 BOOT입니다세션 방식 클라이언트에서 로그인 시도 비밀번호를 암호화하여 서버로 전송 서버는 입력된 값을 검증 후 세션 생성 VUE 상태값(PINIA)에서 EX)로그인 플래그와 기본 유저정보저장 sessionStorage에도 동일 정보 저장 (새로고침 대비) && 원래 가려던 페이지로 리다이렉트 Vue Router의 네비게이션 가드 적용 && 그 외 세션 만료/ 로그아웃 로직 구현 JWT 방식클라이언트(VUE)에서 로그인 시도 비밀번호를 암호화하여 서버로 전송 서버가 토큰과 유저정보를 응답으로 전송Vue에서 받은 토큰과 유저정보를 Vuex store에 저장 (isLogin flag도 함께 저장)토큰을 localStorage에도 저장 && axios 인터셉터에 토큰을 디폴트 헤더로 설정 && 라디이렉트 Vue Router의 네비게이션 가드 적용 && 그 외 세션 만료/ 로그아웃 로직 구현 이렇게 구상을 해봣습니다. 이 프로젝트는 급한 것은 아니기에 천천히 소화시키면서 공부할예정입니다. VUE는 처음이기에,,궁금한 점은위의 구상이 적절한가?제가 느끼기에는 세션은 좀 포트폴리오로 약하지 않나? SPA에서는 많이들 JWT를 써야한다는데 써야하나? (그냥 개발자의 선택이유이고 타당하면 문제없나?) 많은 블로그와 동영상을 보니 대부분 프론트/백 둘 다 인증 책임을 가지는데 소수의 자료에서는 프론트/백 둘 다 인증에 책임을 분배하는 것은 옳지 않다. 보통 백에서 단일 책임이 맞다. 이런 말도 잇는데 맞는 말인지그렇다면 제가 생각한 로직은 백과 프론트 둘 다 책임이 있는 로직인가?백앤드에만 로직이 있는 경우는 무엇이며 둘 다 있는 것은 무엇인가?질문들 중에 알고 있는 지식이 있으시면 공유해주시면 감사하겠습니다.

MungGaeDev · Answer

적절의 기준은 서비스마다 다름세션도 아직 많이 써요, 개발자 마음, 요구조건 따라 선택지를 늘려 놔야 하기에 정확하게 알아둬야죠.다만 둘 중 하나만 해야한다, 그러면 JWT입니다. 상황마다 다름, 일반적으론 백엔드가 인증을 수행합니다. 책임의 뜻이 인증의 정확성이라면 백엔드 책임이 겠죠.이후 생겨난, 세션이든 토큰이든 관리적인 면의 책임이 갈리겠네요.

코딩하는 두루미 · Answer

1.위의 구상이 적절한가?-비밀번호를 암호화하여 서버로 전송(X)비밀번호를 서버로 전송하여 'DB에 저장된 암호화된 Password와 비교' 가 맞는 것 같습니다.-토큰을 LocalStorage에 저장하겠다고 생각하신 이유는 무엇인지?만료시간이 있고, 브라우저를 닫았다 다시 열었을때 재사용하실게 아니라면 SessionStorage 사용 권장드립니다.2.세션과 JWT는 결국 모두 알아야합니다.

SPA 웹 인증 로직

2개의 답변

#boot 목록