본문 바로가기

Vue

(3)
[vue3 Quasar with pinia] 로그인 및 인증(2) 이전 포스트에서 토큰의 저장 위치에 대해 알아보았습니다.  이번에는 저희가 만든 프로젝트에서 어떻게 로그인 및 인증 로직이 수행되는지 살펴보도록 하겠습니다. 프론트엔드 코드를 설명하기에 앞서 백엔드에서 사용하는 로그인 / 토큰 갱신 API를 살펴보겠습니다. Backend Code ( Spring Boot )쿠키 관련 유틸 함수 private Cookie createRefreshTokenCookie(TokenResponse tokenResponse) { Cookie cookie = new Cookie("rtk", tokenResponse.getRtk()); cookie.setHttpOnly(true); //cookie.setSecure(true); // Https 사용 시 ..
[vue3 with pinia] 로그인 및 인증(1) 해당 포스트를 이해하기 위해서는 다음과 같은 개념을 알고 계셔야 합니다!Jwt(Access Token, Refresh Token)PiniaSpring Boot3 & Spring Security6  안녕하세요 Vue3를 사용하여 구축한 프론트엔드 프로젝트에서 로그인 및 인증이 어떻게 수행되는지 살펴보겠습니다.우선 Access Token, Refresh Token이 프론트엔드의 어느 곳에 저장되는지 부터 살펴보겠습니다.   Token은 어디에 저장해야 할까?Token를 저장할 수 있는 위치는 다음과 같이 총 세 곳이 존재합니다Local StorageSession StorageMemoryCookie ( HttpOnly )각 저장소 별 장단점을 가볍게 살펴보겠습니다! Local Storage로컬 스토리지(Loc..
Vue 템플릿 재사용을 위한 "slot" 안녕하심까!!!어쩌다보니 이제야 쓰게되는 블로그 글 ㅎㅅaㅎ... (죄삼다! OTL) 개념을 정확하게 알고 정보를 전달하기보다는제가 코드 짜면서 생각했던 것과 공부한 걸 팀원들에게 전달하는 게 목적이기 때문에 !!말은 편하게 하겠습니닷 ㅎㅎ  개발 배경부터 설명드리자면~~저는 바우처&리워드쪽 백엔드 코드를 어느정도 마무리하고 더 필요한 api를 뽑아내기 위해서 프론트 작업으로 넘어왔답니다일단 데이터가 화면에 제대로 찍히는 지 부터 확인하기 위해서 바우처 리스트를 출력하는 화면부터 만들어보기로 했는데요결과는 다음과 같았습니다!와아아~~~ 개쩐다ㅋㅋ그런데 순간 드는 생각...잠깐... 이 테이블 형식을 저장해두고 다른 컴포넌트에서 갖다 쓸 순 없을까?!? 이게 무슨 말이냐 ?객체지향 수업시간에 항상 나오는 ..