feat: JWT 생성과 프론트 전달 #6

Activity

1. baexxbin

   added

   feat

   on Dec 19, 2024
2. baexxbin commented on Dec 23, 2024

   

   baexxbin

   on Dec 23, 2024

   Author

   More actions

   | 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/
   • 백엔드랑 프론트 연결부분 다시 살펴보기
3. baexxbin

   self-assigned this

   on Dec 24, 2024
4. baexxbin commented on Dec 25, 2024

   

   baexxbin

   on Dec 25, 2024

   Author

   More actions

   | 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 방법 사용해보기
5. baexxbin commented on Dec 26, 2024

   

   baexxbin

   on Dec 26, 2024

   Author

   More actions

   | 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 잘 설정되었는지 확인하기
   • 프론트 확인
     • 컨트롤러로 요청한 내용을 잘 읽어오고 있는지 등 확인하기