// 1. 사용자가 로그인
const login = async (email, password) => {
const response = await axios.post('/login', {
email: email,
password: password
});
// 2. 서버가 accessToken, refreshToken 발급
const { accessToken, refreshToken } = response.data;
// 3. 토큰 저장
await AsyncStorage.setItem('accessToken', accessToken);
await AsyncStorage.setItem('refreshToken', refreshToken);
}
// API 요청할 때 토큰 사용
const fetchData = async () => {
const token = await AsyncStorage.getItem('accessToken');
const response = await axios.get('/api/data', {
headers: {
Authorization: `Bearer ${token}`
}
});
}
// 위의 login 함수에서 이미 저장됨
await AsyncStorage.setItem('refreshToken', refreshToken);
// Access Token이 만료되었을 때 Refresh Token으로 새로 발급
const refreshAccessToken = async () => {
try {
const refreshToken = await AsyncStorage.getItem('refreshToken');
const response = await axios.post('/api/refresh', {
refreshToken: refreshToken
});
const newAccessToken = response.data.accessToken;
await AsyncStorage.setItem('accessToken', newAccessToken);
return newAccessToken;
} catch (error) {
// Refresh Token이 만료되었다면 다시 로그인
if (error.response?.status === 401) {
await AsyncStorage.multiRemove(['accessToken', 'refreshToken']);
// 로그인 페이지로 이동
}
throw error;
}
};
// 실제 사용 예시 (axios interceptor)
axiosInstance.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
// Access Token이 만료되었고, 재시도하지 않았다면
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
// Refresh Token으로 새 Access Token 발급
const newAccessToken = await refreshAccessToken();
// 새 토큰으로 원래 요청 재시도
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`;
return axiosInstance(originalRequest);
}
return Promise.reject(error);
}
);
작동 과정:
1. 로그인 성공 → Access Token + Refresh Token 받음
2. API 요청할 때 Access Token 사용
3. Access Token 만료 → Refresh Token으로 새로운 Access Token 발급
4. Refresh Token도 만료 → 다시 로그인 필요
실생활 비유: