백+프론트 연결

@Override
public void addCorsMappings(CorsRegistry corsRegistry) {
    corsRegistry.addMapping("/**")
            .allowedOriginPatterns("*")
            .allowedMethods(
                    HttpMethod.GET.name(),
                    HttpMethod.POST.name(),
                    HttpMethod.PATCH.name(),
                    HttpMethod.PUT.name(),
                    HttpMethod.DELETE.name()
            )
            .allowedMethods("*")
            .allowedHeaders("*")
            .allowCredentials(true)
            .maxAge(3600);
}

webConfig.java 에 cors설정 추가하고

 

export const Mypage = () => {

    const nav = useNavigate();
    const { isLogin } = UserStore((state) => state);

    useEffect(() => {
        if(!isLogin){
            nav('/')
        }
    })

    const {isPending, isError, error, data} = useQuery({
        queryKey: [USER_INFO],
        queryFn: () => getUserInfo(),
    })

    return(
        isPending?
            <>
                <h1>로딩중</h1>
            </>
            :
            <>
                <h1>마이페이지</h1>
                <p>아이디 : {data.userId}</p>
            </>
    )
}

export default Mypage

Mypage.jsx

export const init = async () => {
        //console.log("===> Axios.interceptor::init()")
        axios.interceptors.request.use((config) => {

            const accessToken = getAccessToken();

            if (accessToken) {
                config.headers['Authorization'] = `${accessToken}`;
            }
            config.headers['Channel'] = 'WEB';

            config.headers['X-Requested-With'] = 'XMLHttpRequest';
            config.headers['Access-Control-Allow-Credentials'] = true;
            config.headers['Access-Control-Allow-Origin'] = '*';
            config.headers['Access-Control-Allow-Methods'] = 'GET, PUT, POST, DELETE, OPTIONS';
            config.headers['Cache-Control'] = 'no-cache';
            config.headers['Pragma'] = 'no-cache';

            console.log('[ Axios.interceptor ] :: processAwait ' + processAwait);

            return config;
        }, err => {
            console.error(err);
            Promise.reject(err);
        });

        axios.interceptors.response.use(
            response => {
                //console.log('[ Axios.interceptor ] :: response OK');
                return response;
            },async err => {
                const config = err.config;          // 기존에 수행하려고 했던 작업
                const response = err.response;

                console.log(`[ Axios.interceptor ] :: response [${config.method}] ${config.url}`);

                if( response.status === 401)
                {
                    console.log('[ Axios.interceptor ] :: ERR :: [401]');

                    if( response.data.object === -1001) {

                        if (processAwait == null) {
                            processAwait = 'temp'

                            let refreshTokenParams = null;
                            let config = response.config;
                            let headers = config.headers;

                            headers['Authorization'] = `${getRefreshToken()}`;
                            refreshTokenParams = {refreshToken: getRefreshToken()};

                            try {
                                const authBaseURL = import.meta.env.VITE_AUTH_URL;
                                processAwait = axios.create({
                                    baseURL: authBaseURL,
                                    headers
                                }).post("/refresh", refreshTokenParams);

                                await processAwait.then(({status, data}) => {

                                    if (status == 200) {
                                        console.log('[ Axios.interceptor ] :: ERR :: [/refresh] : GET NEW TOKEN');

                                        // 토큰 세팅
                                        const newAccessToken = data.object.token;
                                        const newRefreshToken = data.object.refreshToken;

                                        setAccessToken(newAccessToken);
                                        setRefreshToken(newRefreshToken);

                                        console.log('[ Axios.interceptor ] :: ERR :: [/refresh] : 엑세스 토큰 갱신');

                                        headers['Authorization'] = getAccessToken();
                                        const retryAxios = axios.create({headers});

                                        if (config.method === 'get') {
                                            return retryAxios.get(config.url)
                                        } else if (config.method === 'post') {
                                            return retryAxios.post(config.url, config.data);
                                        } else if (config.method === 'patch') {
                                            return retryAxios.patch(config.url, config.data);
                                        } else if (config.method === 'put') {
                                            return retryAxios.put(config.url, config.data);
                                        } else if (config.method === 'delete') {
                                            return retryAxios.delete(config.url, {data: config.data});
                                        }
                                        processAwait = null;
                                    } else {
                                        //토큰재발급 애러 :  토큰 삭제 후 로그인 페이지
                                        processAwait = null;
                                        removeAuthTokens()
                                        location.href = '/login';
                                        Promise.resolve(response);
                                    }
                                })
                            } catch (e) {
                                //토큰재발급 애러 :  토큰 삭제 후 로그인 페이지
                                removeAuthTokens()
                                location.href = '/login';
                                return Promise.reject(e)
                            }
                        } else {
                            await processAwait

                            let config = response.config;
                            let headers = config.headers;

                            config.headers['Authorization'] = getAccessToken();
                            const retryAxios = axios.create({headers});

                            if (config.method === 'get') {
                                return retryAxios.get(config.url)
                            } else if (config.method === 'post') {
                                return retryAxios.post(config.url, config.data);
                            } else if (config.method === 'patch') {
                                return retryAxios.patch(config.url, config.data);
                            } else if (config.method === 'put') {
                                return retryAxios.put(config.url, config.data);
                            } else if (config.method === 'delete') {
                                return retryAxios.delete(config.url, {data: config.data});
                            }
                        }
                    }
                    else if(response.data.object === -1002)
                    {
                        console.log('[ Axios.interceptor ] :: ERR :: [-1002] : WRONG TOKEN -> go login');
                        removeAuthTokens();
                        location.href = '/';
                    }
                    else
                    {
                        console.log('else')
                        return Promise.resolve(response);
                    }

                }
                else if(response.status === 500)
                {
                    return Promise.resolve(response);
                }

            });

 

react-query로 호출하고  isPending이전에는 로딩창(지금은 글자) 띄우다 api요청 끝나면 화면나오게 토큰 유효기간 2분으로 해놓고 보니 갱신이 안되는거같은데 다행히 그냥 변수 오타다

 

갱신되니 아주 기초설정은 완료됬다