[ 핵심 : axios instance사용 ]
1) 인증서버와 데이터 서버를 구분해서 호출하기 위함
2) 데이터서버에 interceptor를 하기 위해서
--> 서버가 클라이언트에게 보내기전에 interceptor 작업을 함
=> '데이터서버' 요청 보내기 전에 '인증서버'를 interceptor로 작업함
(유효한 토큰을 갖고있느지에 대한 확인 작업)
* 클래스 : 학생 (포괄적 개념)
* 인스턴스 : 학생 1, 학생 2... 학생 999 (적용받는 구체적인 하나하나들)
1. 인증서버 : auth.api.js
import axios from 'axios';
const authAPI = axios.create({ baseURL: process.env.REACT_APP_AUTH_SERVER_URL });
export function setAuthAPIAccessToken(token) {
authAPI.defaults.headers.common.Authorization = token ? `Bearer ${token}` : undefined;
}
export default authAPI;
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
import axios from 'axios';
import authAPI from './auth.api';
//1
const lettersAPI = axios.create({ baseURL: process.env.REACT_APP_SERVER_URL });
// 2
lettersAPI.interceptors.request.use(async (config) => {
const authServerResponse = await authAPI.get('/user');
const authServerData = authServerResponse.data;
const success = authServerData.success;
if (success) return config;
//로그아웃시 처리하는 코드 작성
//throw new Error();
},
(error) => {
return Promise.reject(error);
}
);
export default lettersAPI;
1) letterAPI = axios 인스턴스 생성 (axios.create~~)
2) 데이터 서버에 데이터 추가/조회하기전에 반드시 '인증서버'에 accessToken이 유효한지 확인
=> lettersAPI인 axios를 / interceptors를 사용해서 중간 작업을 하는데 / 요청할 것 / use: 이것을 =>함수 ()=>{}
=> authServerResponse = get 방식으로 '/user'를 '인증서버'에서 데이터 가져옴
=> success = 성공하면 config return
=> config : 요청에 대한 정보가 있음
3. 리덕스-모듈 : authSlice.js
import { createSlice } from '@reduxjs/toolkit';
import { setAuthAPIAccessToken } from 'api/auth.api';
const initialState = {
isLoggin: false,
userId: localStorage.getItem('userId'),
avatar: localStorage.getItem('avatar'),
nickname: localStorage.getItem('nickname'),
};
const authSlice = createSlice({
name: 'auth',
initialState,
reducers: {
login: (state, action) => {
const { userId, avatar, nickname, accessToken } = action.payload;
localStorage.setItem('accessToken', accessToken);
localStorage.setItem('userId', userId);
localStorage.setItem('avatar', avatar);
localStorage.setItem('nickname', nickname);
setAuthAPIAccessToken(accessToken);
state.isLoggin = true;
state.userId = userId;
state.avatar = avatar;
state.nickname = nickname;
state.accessToken = accessToken;
},
logout: (state, action) => {
localStorage.clear();
state.isLoggin = false;
},
},
});
export const { login, logout } = authSlice.actions;
export default authSlice.reducer;
1) 로그인시 데이터를 저장하고, 인증서버의 setAuthAPIAccessToken 함수에 accessToken저장!
=> 개발자도구 - 네트워크 실행시 [user] 보임
