토큰 만료, interceptor

refreshToken 만료 관련 오류

refreshToken이 만료가 되면 로그인 화면으로 전환이 되어야 하는데, 테스트 기간에 확인을 못해 런칭 후에 오류를 확인하게 되었습니다.

해결방안을 찾으면서 생각한 가장 이상적인 해결방안은 interceptor에서 확인 후에도 최종적으로 오류가 나면 로그인 화면으로 전환되는 것이었습니다.

https://lightrains.com/blogs/axios-intercepetors-react/
react에서 interceptor
https://dev.to/arianhamdi/react-hooks-in-axios-interceptors-3e1h

...
api.interceptors.response.use(
  response => {
    return response;
  },
  async error => {
    const {config, response} = error;

    if (response.data.code === 1502) {
      const refresh = await AsyncStorage.getItem('refreshToken');
      const token = refresh && JSON.parse(refresh);

      const originalRequest = config;
      await axios({
        headers: {
          'Content-Type': 'application/json',
        },
        method: 'post',
        url: '...',
        data: {
          refreshToken: token,
        },
      })
        .then(async (res: any) => {
        // accessToken, refreshToken 다시 가져옴
          ...
        })
        .catch(err => {
          // refreshToken까지 만료됨
          // 이곳에서 로그인 화면으로 전환되는 코드를 추가하고 싶었음
          return Promise.reject(err);
        });
      return axios(originalRequest);
    }
  },
);
...

일단 해결위해 사용한 방법은 bottomNavigation에 있는 페이지 각각에서 토큰 만료 관련 에러가 나타나면, 로그인 페이지로 전환하는 코드를 추가했습니다.

  const getInfoData = async () => {
    const access: any = await AsyncStorage.getItem('accessToken'); // testLogin
    const token: any = JSON.parse(access);

    await api
      .get('members', {
        headers: {Authorization: `Bearer ${token}`},
      })
      .then(({data}) => {
        ...
      })
      .catch((err: any) => {
        // 여기서 로그인 페이지로 전환되게 해줌
        if (err.response.data.code === 1502) setModalLogin(true);
      });
  };

위 코드처럼 Home, Feed, Map, Mypage 즉, bottomNavigation에 속해있는 페이지에만, 로그인 페이지로 전환할 수 있는 코드를 넣었습니다.