인프런 커뮤니티 질문&답변

안녕하세요 강사님!
강사님께서 해당 강의에서 작성해주신대로
우선 Database와 백엔드서버를 구동시킨 채로 프론트엔드 서버를 npx react-native run-ios로 어플을 빌드하고

로그아웃 버튼을 클릭했을때 위의 이미지와 같이 401에러가 발생합니다.

제가 작성한 코드를 보여드리면

1. src/hooks/queries/useAuth.ts

    

   
   function useLogout(mutationOptions?: UseMutationCustomOptions) {
     return useMutation({
       mutationFn: logout,
       onSuccess: () => {
         console.log('useLogout onSuccess');
   
         removeHeader('Authorization');
         removeEncryptStorage(storageKeys.REFRESH_TOKEN);
       },
       onSettled: () => {
         // auth에 해당하는 쿼리들을 캐시 무효화해서 업데이트
         queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]});
       },
       ...mutationOptions,
     });
   }
   
   function useAuth() {
     const logoutMutation = useLogout();
   
     return {
       logoutMutation,
     };
   }
   
   export default useAuth;
   

2. src/api/auth.ts

const logout = async () => {
  console.log('logout API call');
  try {
    await axiosInstance.post('/auth/logout');
  } catch (err) {
    console.error(`logout api err :::: ${err}`);
  }
};

export { logout };

3. src/api/axios.ts

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:3030',
  withCredentials: true,
});

export default axiosInstance;

4. src/utils/header.ts

import axiosInstance from '../api/axios';

function setHeader(key: string, value: string) {
  axiosInstance.defaults.headers.common[key] = value;
}

function removeHeader(key: string) {
  if (!axiosInstance.defaults.headers.common[key]) {
    return;
  }

  delete axiosInstance.defaults.headers.common[key];
}

export {setHeader, removeHeader};

5. src/screens/map/MapHomeScreen.tsx

import React from 'react';
import {Button, StyleSheet, Text, View} from 'react-native';
import useAuth from '../../hooks/queries/useAuth';

const MapHomeScreen = () => {
  const {logoutMutation} = useAuth();

  return (
    <View>
      <Text>맵 스크린</Text>
      <Button title="로그아웃" onPress={() => logoutMutation.mutate(null)} />
    </View>
  );
};

const styles = StyleSheet.create({});

export default MapHomeScreen;