[ 핵심 : axios instance사용 ]
1) 인증서버와 데이터 서버를 구분해서 호출하기 위함
2) 데이터서버에 interceptor를 하기 위해서
--> 서버가 클라이언트에게 보내기전에 interceptor 작업을 함
=> '데이터서버' 요청 보내기 전에 '인증서버'를 interceptor로 작업함
(유효한 토큰을 갖고있느지에 대한 확인 작업)
* 클래스 : 학생 (포괄적 개념)
* 인스턴스 : 학생 1, 학생 2... 학생 999 (적용받는 구체적인 하나하나들)
1. 인증서버 : auth.api.js
1) authAPI = axios 인스턴스 생성 (axios.create~~)
2) setAuthAPIAccessToken을 함수로 만들어서 외부에서 사용
=> 토큰이 있으면 사용하고 없으면 undefined로 반환
[참고 사이트]
Config 기본 설정 | Axios 러닝 가이드
Config 기본 설정 모든 요청에 적용될 구성 기본(Config Defaults) 값을 지정할 수 있습니다. 글로벌 axios 기본(defaults) 설정 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization
yamoo9.github.io
2. 데이터 서버 : letters.api.js
1) letterAPI = axios 인스턴스 생성 (axios.create~~)
2) 데이터 서버에 데이터 추가/조회하기전에 반드시 '인증서버'에 accessToken이 유효한지 확인
=> lettersAPI인 axios를 / interceptors를 사용해서 중간 작업을 하는데 / 요청할 것 / use: 이것을 =>함수 ()=>{}
=> authServerResponse = get 방식으로 '/user'를 '인증서버'에서 데이터 가져옴
=> success = 성공하면 config return
=> config : 요청에 대한 정보가 있음
3. 리덕스-모듈 : authSlice.js
1) 로그인시 데이터를 저장하고, 인증서버의 setAuthAPIAccessToken 함수에 accessToken저장!
=> 개발자도구 - 네트워크 실행시 [user] 보임
'React' 카테고리의 다른 글
React : React Query + Axios ( 데이터 조회 + 추가 ) (0) | 2023.12.17 |
---|---|
React[리액트 심화] 비동기통신 미들웨어 thunk (경유지 역할) (0) | 2023.12.04 |
리액트 : 새로고침 시 로그인 유지 (0) | 2023.12.02 |
리액트 : 로그인 & 회원가입 구현 (axios api 사용) (1) | 2023.12.01 |
리액트 : 인증/인가(쿠키, 세션, 토큰, JWT) (0) | 2023.11.30 |