@@ -3,34 +3,13 @@ import axios from 'axios';
33const instance = axios . create ( {
44 baseURL : process . env . NEXT_PUBLIC_API_BASE_URL ,
55 withCredentials : true ,
6- timeout : 5000 ,
6+ timeout : 3000 , //3초동안 요청 안가면 timeout
77} ) ;
88
99//토근 갱신
1010const reNewToken = async ( ) => {
11- try {
12- const response = await axios . get (
13- `${ process . env . NEXT_PUBLIC_API_BASE_URL } ,
14- ) ;
15- localStorage . setItem ( 'accessToken' , response . data . accessToken ) ;
16- } catch ( err ) {
17- if ( axios . isAxiosError ( err ) && err . response ) {
18- //재발급 중 에러 발생 시
19- if (
20- ( err . response . data . message === 'invalid token' &&
21- err . response . data . statusCode === 400 ) ||
22- ( err . response . data . message === 'token not found' &&
23- err . response . data . statusCode === 404 ) ||
24- ( err . response . data . message === 'token mismatch' &&
25- err . response . data . statusCode === 401 )
26- ) {
27- window . location . href = '/' ;
28- setTimeout ( ( ) => {
29- window . localStorage . clear ( ) ;
30- } , 0 ) ;
31- }
32- }
33- }
11+ const response = await instance ( `/auth/new-access-token` ) ;
12+ localStorage . setItem ( 'accessToken' , response . data . accessToken ) ;
3413} ;
3514
3615//요청 전 인터셉터
@@ -54,56 +33,88 @@ instance.interceptors.request.use(
5433instance . interceptors . response . use (
5534 ( response ) => {
5635 if ( response . status === 404 ) {
57- console . log ( ' 404 error' ) ;
36+ window . location . href = '/ 404' ;
5837 }
5938 return response ;
6039 } ,
6140 async ( error ) => {
62- if (
63- ( error . response . data . statusCode === 401 &&
64- error . response . data . message === 'jwt expired' ) ||
65- ( error . response . data . statusCode === 404 &&
66- error . response . data . message === 'token not found' ) ||
67- ( error . response . data . statusCode === 401 &&
68- error . response . data . message === 'token mismatch' )
41+ console . log ( '인스턴스에러' , error ) ;
42+ //요청 만료시
43+ if ( error . message === 'timeout of 3000ms exceeded' ) {
44+ alert ( '요청시간이 초과되었습니다.' ) ;
45+ window . location . href = '/' ;
46+ window . localStorage . clear ( ) ;
47+ return ;
48+ }
49+ //토큰 재발급
50+ else if (
51+ error . response . data . statusCode === 401 ||
52+ error . response . data . statusCode === 404
6953 ) {
70- //토큰 재발급
7154 if (
7255 error . response . data . statusCode === 401 &&
7356 error . response . data . message === 'jwt expired'
7457 ) {
75- await reNewToken ( ) ; //스토리지에서 토큰 받아서 재발급 받는 로직
76- const accessToken = localStorage . getItem ( 'accessToken' ) ;
58+ try {
59+ await reNewToken ( ) ; //스토리지에서 토큰 받아서 재발급 받는 로직
60+ const accessToken = localStorage . getItem ( 'accessToken' ) ;
7761
78- error . config . headers [ 'Authorization' ] = ` Bearer ${ accessToken } ;
62+ error . config . headers [ 'Authorization' ] = `Bearer ${ accessToken } ;
7963
80- // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
81- const response = await instance ( error . config ) ;
82- return response ;
64+ // 중단된 요청을(에러난 요청)을 토큰 갱신 후 재요청
65+ const response = await instance ( error . config ) ;
66+ return response ;
67+ } catch ( err ) {
68+ console . log ( '리프레쉬에레ㅓ' , err ) ;
69+ if ( axios . isAxiosError ( err ) && err . response ) {
70+ //재발급 중 에러 발생 시
71+ if (
72+ ( err . response . data . message === 'invalid token' &&
73+ err . response . data . statusCode === 400 ) ||
74+ ( err . response . data . message === 'token not found' &&
75+ err . response . data . statusCode === 404 ) ||
76+ ( err . response . data . message === 'token mismatch' &&
77+ err . response . data . statusCode === 401 ) ||
78+ ( err . response . data . statusCode === 400 &&
79+ err . response . data . message === 'jwt must be provided' )
80+ ) {
81+ alert ( '로그인 갱신에 실패했습니다. 재 로그인 부탁드립니다.' ) ;
82+ window . location . href = '/' ;
83+ window . localStorage . clear ( ) ;
84+ return ;
85+ }
86+ }
87+ }
8388 }
84- //클라이언트 access와 redis access가 다를 때, 없을 때
89+ //클라이언트 access와 redis access가 다를 때 || 없을 때
8590 if (
8691 ( error . response . data . statusCode === 401 &&
8792 error . response . data . message === 'token mismatch' ) ||
88- ( error . response . data . statusCode === 404 &&
89- error . response . data . message === 'token not found' )
93+ ( error . response . data . message === 'token not found' &&
94+ error . response . data . statusCode === 404 )
9095 ) {
9196 alert ( error . response . data . message ) ;
9297 window . location . href = '/' ;
93- setTimeout ( ( ) => {
94- window . localStorage . clear ( ) ;
95- } , 0 ) ;
98+ window . localStorage . clear ( ) ;
99+ return ;
96100 }
97101 } else if (
98- error . response . data . message === 'jwt malformed' &&
99- error . response . data . statusCode === 400
102+ error . response . data . statusCode === 400 &&
103+ error . response . data . message === 'jwt malformed'
100104 ) {
101105 window . alert ( '로그인이 필요합니다.' ) ;
102106 window . location . href = '/' ;
103107 return ;
108+ } else if (
109+ error . response . data . statusCode === 400 &&
110+ error . response . data . message === 'jwt must be provided'
111+ ) {
112+ window . alert ( '토큰이 만료되었습니다.' ) ;
113+ window . location . href = '/' ;
114+ window . localStorage . clear ( ) ;
115+ return ;
104116 }
105- return Promise . reject ( error ) ;
106- // return error;
117+ return ;
107118 } ,
108119) ;
109120
0 commit comments