feat: JWT 생성과 프론트 전달

[baexxbin]

어떤 기능인가요?

• Authentication 객체를 통해 사용자 정보를 조회하고 JWT 생성
• 프론트에서 로그인이 되었다고 처리해서 로그인된 상태 유지하기

작업 상세 내용

• 소셜 로그인 성공 후 얻은 정보를 바탕으로 JWT 생성
  • TokenService 구성 내용을 바탕으로 TokenAuthenticationFilter, AuthController수정
  • 프론트에게 보낼 쿠키 httpOnly 쿠키로 설정하기
• 서버에서 만든 JWT 프론트로 전달하기
  • 프론트에서 jwt를 localStorage가 아닌 쿠키로 사용하는 코드로 수정하기

내 코드을 이해하기 위한 사전 정보

• JWT 만들기
  • TokenProvider
    • Jwt의 생성 및 검증만 처리
  • TokenService
    • TokenProvider를 활용해 비즈니스 로직을 구현
    • Authentication 객체를 받아 액세스 토큰과 리프레시 토큰 생성
    • Redis의 역할
      • 리프레시 토큰 저장
      • 토큰 만료 처리

참고할만한 자료(선택)

[baexxbin]

| 2024-12-24 (월)

진행 내용

• axios 고치기

시도한 내용

• axios 설정 변경
  • 기존에 plugin, service를 통한 모듈화 두 가지 방법을 사용하고 있었음
    • plugin : vue에서 전역변수로 설정해 사용하는 방법으로 이땐, this.$axios로 전역으로 사용
    • service : 모듈화?를 위해 axios를 service에서 인스턴스로 따로뺀건데,, 지금 코드에선 service 아니고 걍 인스턴스로 사용하고 있어서 이것도 없애도될듯
  • 걍 쌩으로 import axios하는 코드로 바꿨는데도 안됨!!!!!!!! 도대체 왜!!!!!!!!
• 근데 웃긴건 401에러는 또 뜸. 그럼 axios로 어쨌든 요청보냈다는거 아닌가?
• Proxy.fetchSessionData이 의심스러움. 자꾸 백엔드랑 연결되는 파일인 asserts/index.js관련 파일이 오류 메세지에 뜸
  • 뭔가.. vue3랑 백엔드 프록시 설정이 이상한듯…

내일 진행할 내용

• Vue3에선 axios 설정방법이 다른지 다시 살펴보기
  • https://blog.logrocket.com/how-to-use-axios-vue-js/
• 백엔드랑 프론트 연결부분 다시 살펴보기

[baexxbin]

| 2024-12-25 (수)

진행 내용

• axios 고치기(2)

시도한 내용

• .env 설정 (환경변수 설정)
  • base_url을 env에서 설정한 후, import.meta.env.VITE_API_BASE_URL로 불러와 사용
  • import.meta.env.VITE_API_BASE_URL
    • vite사용 시 사용되는 방법
  • process.env
    • vue-cli 사용 시 사용되는 방법
      | 현재 Vite를 사용하고 있기에 import방법 사용해야함. 그런데 import방법을 사용하면 빌드가 안되고, process방법 사용하면 빌드는 되는데 Backend API Base URL: undefined 이렇게 값을 못가져옴
• 기존에 clie관련 babel코드가 있어서 삭제해줌

내일 진행할 내용

• 현재 문제
  • 환경변수 (백엔드 url)를 제대로 읽지 못하고 있음
  • loadEnv 방법 사용해보기

[baexxbin]

| 2024-12-26 (목)

진행 내용

• Axios 고치기(3)
• 인증 실패 오류 탐색

Axios 문제 해결

• vue-cli, vite 혼합해서 사용하던 문제
  • vite로 프로젝트를 구성하고 진행하고 있었으나, 초기에 설정했던 vue-cli 설정으로 인한 파일 존재(babel)
  • npm run serve : vue-clie 실행 명령어
  • npm run start : vite 실행 명령어
    • 기존에 사용하던 serve가 아닌 start로 변경
    • 포트번호 또한 바뀌어서 수정 (4173 → 5173)
• 헤더 파일 까먹었던 문제..
  • 헤더 파일에도 axios 설정을 해줬었는데 까먹고 있었다… (고쳐줌)
• vite.config.mjs 환경변수 가져오는 부분 수정
  • vite에서 환경변수는 import.meta.env.VITE_API_BASE_URL로 가져옴
    • 그런데 내 프로젝트에선 이럼 오류남 (TypeError: Cannot read properties of undefined (reading 'VITE_API_BASE_URL'))
  • loadEnv()를 이용하는 방식으로 수정

우선, ReferenceError: env is not defined 오류는 뜨지 않음!
axios연결은 됐는데, 데이터를 똑바로 못가져오는 듯. (+ axios 전역 설정 완료)

핸들러 인증 실패 오류

• 현재 소셜 로그인을 진행하면, 브라우저에 쿠키랑 엑세스 토큰은 잘 발급이 됨
• 하지만 프론트에서 진행해야할 fetchLoginResponse() 메소드가 실행되지 않음
  • fetchLoginResponse() 실행 오류 해결: 백엔드 핸들러에서 리다이렉트 url에 파라미터 값 설정(http://localhost:5173/JoinMember?loginSuccess=true)

내일 진행할 내용

• 백엔드 확인
  • log찍어서 Authorization 잘 설정되었는지 확인하기
• 프론트 확인
  • 컨트롤러로 요청한 내용을 잘 읽어오고 있는지 등 확인하기