:: 블로그 만들기 프로젝트 - 백앤드 작업 3

이번 글은.. 시큐리티와의 분투를 한 나의 글이다..

 

결론적으로는 아직도 진행 중이다 

 

OAuth2는 하지도 못했다 

 

원인은.. Redis와 함께하는 리프래시 토큰 구현 때문이다..

 

Redis로 rtk와 atk 구현은 끝났고.. 이제 로직만 잘 짜서 액세스 토큰 만료됐을 때 리프래시랑 잘 비교해서 

새로 발급해주기만 하면 된다(프런트에서 만료 5분 전 갱신 요청 > 백엔드에서 갱신하고 rtk, atk 재발급)

 

순전히 리프래시는 재발급용으로 놔뒀고.. 로그인 여부는 그냥 db에 isLogged를 하나 만들어서 처리하고 있다..

 

그리고 매번 새로고침 할 때마다 로그인하는 게 귀찮아서 vuex 쓸 때 쓰던 vue persist.. 를 가져오려 했는데

https://github.com/championswimmer/vuex-persist

GitHub - championswimmer/vuex-persist: A Vuex plugin to persist the store. (Fully Typescript enabled)

지금은 pinia를 쓰고 있기 때문에.. 아래 녀석을 참고했다 

https://github.com/prazdevs/pinia-plugin-persistedstate

GitHub - prazdevs/pinia-plugin-persistedstate: 🍍 Configurable persistence and rehydration of Pinia stores.

그런데.. 보이지가 않는다..

 

아니 쿠키로 스테이트 유지하는 예제가 없다 ;; 그렇다고 누가 또 만들어서 쓰고 있나? 해서 열심히 한 10분 정도 찾아봤는데 없어서

 

생각했다 " 아 귀찮아 그냥 내가 만들어서 쓰자 "

 

로그인을 하면 항상 홈 화면으로 라우팅을 할 것이고 라우터 가드에 js-cookie를 붙여서

로그인하자마자 쿠키 발급과 새로 고침 했을 때 쿠키를 계속 참조하면서 store에 상태를 붙여 넣는..

그런 식으로 구현을 했다. 아래 두 링크를 참조하면 쉽게 이해할 수 있다

https://github.com/B-HS/BBlog/blob/main/bblogfront/src/router/index.ts

GitHub - B-HS/BBlog: 개인용 종합 홈페이지

 

https://github.com/B-HS/BBlog/blob/main/bblogfront/src/store/Cookie/PiCookie.ts

GitHub - B-HS/BBlog: 개인용 종합 홈페이지

 

여하튼 그렇게 리프래셔를 제외한 로그인도 끝냈고..

 

각 버튼마다의 기능(회원/비회원)의 구현도 거의 다 끝났다 

 

이번 주 안으로 아마 외부 로그인까지 끝낼 수 있을 것 같고..

 

추가로 간단한 마이페이지와 회원가입 페이지까지 작성하면 블로그 본체의 완성이다 

 

다음 글은 백엔드를 완성해서 새롭게 배운 로직이나 기술들을 쭉 써 내려가며 정리해봐야겠다