feat: MeeTeamIdle#111 토큰 재발급 API 엔드포인트 추가

kimsuyeon0916 · Jul 8, 2024 · c7ddfa3 · c7ddfa3
1 parent 045b952
commit c7ddfa3
Show file tree

Hide file tree

Showing 7 changed files with 44 additions and 2 deletions.
diff --git a/src/components/recruit/recruitDetail/modal/accountDelete/AccountDelete.tsx b/src/components/recruit/recruitDetail/modal/accountDelete/AccountDelete.tsx
@@ -7,6 +7,7 @@ import { withdrawAccount } from '../../../../../service';
 import secureLocalStorage from 'react-secure-storage';
 
 const ACCESS_TOKEN_KEY = import.meta.env.VITE_ACCESS_TOKEN_KEY;
+const REFRESH_TOKEN_KEY = import.meta.env.VITE_REFRESH_TOKEN_KEY;
 const PLATFORM_ID = import.meta.env.VITE_PLATFORM_ID;
 
 const AccountDelete = () => {
@@ -22,6 +23,7 @@ const AccountDelete = () => {
 			setUserState(null);
 			queryClient.clear();
 			secureLocalStorage.removeItem(ACCESS_TOKEN_KEY);
+			secureLocalStorage.removeItem(REFRESH_TOKEN_KEY);
 			secureLocalStorage.removeItem(PLATFORM_ID);
 		},
 	});

diff --git a/src/env.d.ts b/src/env.d.ts
@@ -2,6 +2,7 @@ interface ImportMeta {
 	env: {
 		VITE_BASE_URL: string;
 		VITE_ACCESS_TOKEN_KEY: string;
+		VITE_REFRESH_TOKEN_KEY: string;
 		VITE_NAVER_CLIENT_ID: string;
 		VITE_NAVER_STATE: string;
 		VITE_NAVER_CALLBACK_URL: string;

diff --git a/src/hooks/useAuth.ts b/src/hooks/useAuth.ts
@@ -13,6 +13,7 @@ import { User } from '../types';
 import secureLocalStorage from 'react-secure-storage';
 
 const ACCESS_TOKEN_KEY = import.meta.env.VITE_ACCESS_TOKEN_KEY;
+const REFRESH_TOKEN_KEY = import.meta.env.VITE_REFRESH_TOKEN_KEY;
 
 const PLATFORM_ID = import.meta.env.VITE_PLATFORM_ID;
 
@@ -36,8 +37,9 @@ export const useCheckExist = ({ onSuccess, setUserState, setLoginState }: AuthPr
 	return useMutation({
 		mutationFn: checkExist,
 		onSuccess: data => {
-			if (data?.accessToken) {
+			if (data?.accessToken && data?.refreshToken) {
 				secureLocalStorage.setItem(ACCESS_TOKEN_KEY, data.accessToken);
+				secureLocalStorage.setItem(REFRESH_TOKEN_KEY, data.refreshToken);
 				setUserState?.({
 					userId: data.userId,
 					nickname: data.nickname,
@@ -61,9 +63,10 @@ export const useNaver# = ({ onSuccess, setUserState, setLoginState }: AuthP
 	return useMutation({
 		mutationFn: #,
 		onSuccess: data => {
-			if (data?.accessToken) {
+			if (data?.accessToken && data?.refreshToken) {
 				secureLocalStorage.removeItem(PLATFORM_ID);
 				secureLocalStorage.setItem(ACCESS_TOKEN_KEY, data.accessToken);
+				secureLocalStorage.setItem(REFRESH_TOKEN_KEY, data.refreshToken);
 				setUserState?.({
 					userId: data.userId,
 					nickname: data.nickname,
@@ -131,6 +134,7 @@ export const useSignOut = ({ onSuccess, setUserState, setLoginState }: AuthProps
 		mutationFn: signOut,
 		onSuccess: () => {
 			secureLocalStorage.removeItem(ACCESS_TOKEN_KEY);
+			secureLocalStorage.removeItem(REFRESH_TOKEN_KEY);
 			setUserState?.(null);
 			setLoginState?.(false);
 			onSuccess?.();

diff --git a/src/service/auth/auth.ts b/src/service/auth/auth.ts
@@ -1,5 +1,6 @@
 import type { Department, #Payload, University, UserReponse } from '../../types';
 import { EndPoint, axiosAuthInstance, axiosInstance } from '..';
+import axios from 'axios';
 
 const platformType = 'NAVER';
 
@@ -116,3 +117,14 @@ export const withdrawAccount = async () => {
 		console.error(error);
 	}
 };
+
+export const issueToken = async () => {
+	try {
+		const response = await axios.post<UserReponse>(EndPoint.ISSUE);
+
+		return response;
+	} catch (error) {
+		console.error(error);
+		return null;
+	}
+};
diff --git a/src/service/axiosInstance.ts b/src/service/axiosInstance.ts
@@ -2,6 +2,7 @@ import axios, { AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'ax
 import { CustomInstance } from '../types';
 import qs from 'qs';
 import secureLocalStorage from 'react-secure-storage';
+import { issueToken } from './';
 
 const axiosConfig = {
 	baseURL: import.meta.env.VITE_BASE_URL,
@@ -11,6 +12,7 @@ const axiosConfig = {
 };
 
 const ACCESS_TOKEN_KEY = import.meta.env.VITE_ACCESS_TOKEN_KEY;
+const REFRESH_TOKEN_KEY = import.meta.env.VITE_REFRESH_TOKEN_KEY;
 
 export const axiosInstance: CustomInstance = axios.create(axiosConfig);
 export const axiosAuthInstance: CustomInstance = axios.create(axiosConfig);
@@ -23,6 +25,16 @@ axiosAuthInstance.defaults.paramsSerializer = params => {
 	return qs.stringify(params, { arrayFormat: 'repeat' });
 };
 
+const reissueToken = () => {
+	issueToken().then(async res => {
+		if (res?.status === 200 && res.data.accessToken && res.data.refreshToken) {
+			secureLocalStorage.setItem(ACCESS_TOKEN_KEY, res.data.accessToken);
+			secureLocalStorage.setItem(REFRESH_TOKEN_KEY, res.data.refreshToken);
+			onRequest(res.config);
+		}
+	});
+};
+
 const onResponse = (response: AxiosResponse): AxiosResponse => {
 	return response.data;
 };
@@ -34,6 +46,14 @@ const onError = (error: AxiosError) => {
 		console.error(response.data);
 	}
 
+	if (error.config && response?.status === 403) {
+		const refreshToken = secureLocalStorage.getItem(REFRESH_TOKEN_KEY);
+
+		error.config.headers.Authorization = `Bearer ${refreshToken}`;
+
+		return reissueToken();
+	}
+
 	return Promise.reject(error);
 };
 

diff --git a/src/service/endPoint.ts b/src/service/endPoint.ts
@@ -13,6 +13,7 @@ export const EndPoint = {
 	},
 	SIGN_OUT: '/auth/logout',
 	WITHDRAW: '/user',
+	ISSUE: '/auth/reissue',
 
 	/* profile */
 	PROFILE: {

diff --git a/src/service/index.ts b/src/service/index.ts
@@ -9,6 +9,7 @@ import {
 	readDepartmentList,
 	signOut,
 	withdrawAccount,
+	issueToken,
 } from './auth/auth';
 import {
 	getPostingData,
@@ -80,4 +81,5 @@ export {
 	deletePostingRecruit,
 	readProfileImage,
 	withdrawAccount,
+	issueToken,
 };