React Native 토큰 만료 시 로그아웃 처리하기

React 나 React Native 프로젝트들을 경험하다보면 반복적인 코드를 줄이고 가독성을 높이는 API 코딩처리를 위해 axios.create로 만든 instance의 interceptors로 API 처리가 성공 했을 때 또는 실패 했을 때 API 요청한 컴포넌트로 response가 이동하기 전에 선처리할 수 있는 Middleware 설정을 거의 항상 하게 된다.

const initialize = initialConfig => {
    const instance = axios.create(initialConfig);

    instance.interceptors.request.use(async config => {
        const { accessToken, guestToken } = store.getState().auth;
        config.headers.token = guestToken;
        if (config.tokenFlag === true) {
            config.headers.token = accessToken || guestToken;
            delete config.tokenFlag;
        }

        if (config.fileFlag === true) {
            config.headers["Content-Type"] = "multipart/form-data";
            delete config.fileFlag;
        }

        return config;
    });
	// 
    instance.interceptors.response.use(onFulfill, onReject);

    return instance;
};

export default initialize;

그런데 이런 middleware 설정하는 파일들은 컴포넌트(jsx)가 아닌 js파일이라 useNavigation hook을 쓰거나 prop으로 navigation을 받아서 사용할 수 없다.

그렇다면 API 요청이 실패했고(onReject) 토큰 만료 에러일 때 로그아웃 처리 후 로그인 화면으로 이동시키고 싶을 때 어떻게 하면 좋을까?

조금 무식하게 API 요청한 컴포넌트 마다 실패 경우 처리를 각각 해줄 수도 있지만, middleware라는 공통처리 기능이 있는데 그러고 싶지는 않다.

React Navigation 공식문서를 찾아보니 "Navigating without the navigation prop"라는 안내 코드가 있고 이를 통해 middleware 설정 파일에서도 navigation 액션을 사용할 수 있었고, 아래와 같이 무사히 토큰 만료 시 로그아웃 처리를 할 수 있었다.

const onReject = async error => {
    const { dispatch } = store;
    if (error.response?.status === 401 && error.response?.data.result === "TOKEN INVALID") {
        // 토큰 만료의 경우 로그아웃 처리
        dispatch(setModalOn({ type: "alert", title: error.response?.data.message }));
        dispatch(setLogout());
        await queryClient.clear();
        await clearStorage();
        navigationRef.reset({
            index: 1,
            routes: [
                {
                    name: "bottomTab"
                },
                {
                    name: "login"
                }
            ]
        });
    }
	...