연차 신청, 관리 시스템 만들기 #6 백엔드의 프론트엔드 삽질(Vue3)

├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── Login.vue
│   │   └── SignUp.vue
│   ├── config
│   │   └── axios.js
│   ├── main.js
│   ├── plugins
│   │   └── vuetify.js
│   ├── router
│   │   └── index.js
│   ├── store
│   │   ├── counter.js
│   │   └── userStore.js
│   ├── style.css
│   └── views
│       ├── Admin.vue
│       ├── Dashboard.vue
│       └── Userinfo.vue
└── vite.config.js

 

Vite 가 요즘 대세라길래 번들러로 써봤다.. 

그리고 나름의 정리(?)로 디렉토리를 나눴는데 프론트분들 혈압이 오를지 모르겠지만 구성해봤다.. 타입스크립트는 나중에 꼭 배워 보고싶긴하다. (NestJs도 배워보고싶다) 그렇지만 지금 이거 하면 프로젝트가 산으로 갈 것이 분명하다.

 

 

Vuetify 공식 홈페이지에서 참 친절하게 예제를 주길래 예제에 나 나름의 살과 GPT향 첨가로 UI를 만들어봤다.

그리고 항상 궁금했던것 !! 

 

프론트에 대해 무지했을 땐 .. 서버에서 로그인 api 성공시 JWT 만 주면 될 줄 알았다. 그리고 이 JWT를 클라이언트가 어떻게, 어디에 저장해야하는지 의문이였다. 프로젝트를 하면서 구글링 결과 로컬스토리지나 세션스토리지에 저장을 하면 된다는데. 세션스토리지면 새로고침시 날아갈 것이다.

 

그래서 로컬스토리지에 토큰을 저장하게 했다. AccessToken은 'Authorization'이란 응답헤더에 전달해 로컬스토리지에 저장.

RefreshToken은 쿠키에 담아 클라이언트에게 전달해서 줬다!!

 

리프레시토큰이 쿠키에

 

로컬스토리지에 접근토큰이

 

그리고 바보같이 로그인을 성공하니 유저정보가 안뜨길래 멍했다. 그렇다 토큰이랑 유저정보도 줘야 된다..

이 프로젝트를 안했으면 참..;

 

그래서 유저정보를 전역상태 관리라이브러리인 pinia를 이용해서 만들어봤다.

 

 

로그인을 하면 유저 이름이 AnonyMous에서 어드민으로 바뀌었다. 이런거 처음이라 나름 재밌었다..