diff --git a/src/api/axios.ts b/src/api/axios.ts index 89e38ef0..40265201 100644 --- a/src/api/axios.ts +++ b/src/api/axios.ts @@ -1,5 +1,5 @@ import axios from 'axios'; -import { postReissue } from './post'; +import { postPublicReissue, postReissue } from './post'; // axios 인스턴스 생성 export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, @@ -13,6 +13,7 @@ instance.interceptors.request.use((config) => { return config; }); + //리프레시 토큰 구현 instance.interceptors.response.use( (response) => { @@ -36,9 +37,10 @@ instance.interceptors.response.use( localStorage.setItem('refreshToken', refreshToken); axios.defaults.headers.common.Authorization = `${accessToken}`; originRequest.headers.Authorization = `${accessToken}`; - return axios(originRequest); + return instance(originRequest); } else if (tokenResponse.response.status === 400) { window.location.href = '/login'; + //나중에 지우고 로그인으로 navigate } } catch (error) { @@ -59,6 +61,55 @@ instance.interceptors.response.use( }, ); +// axios 인증 필요 없는 인스턴스 생성 +export const publicInstance = axios.create({ + baseURL: process.env.REACT_APP_API_URL, + headers: { + Authorization: `${localStorage.getItem('accessToken')}`, + }, +}); +publicInstance.interceptors.request.use((config) => { + const token = localStorage.getItem('accessToken'); + config.headers.Authorization = token; + + return config; +}); + +//리프레시 토큰 구현 +publicInstance.interceptors.response.use( + (response) => { + return response; + }, + async (error) => { + const { + config, + response: { status }, + } = error; + + if (status === 401) { + const originRequest = config; + try { + const tokenResponse: any = await postPublicReissue({ + refreshToken: localStorage.getItem('refreshToken'), + }); + if (tokenResponse.status === 200) { + const { accessToken, refreshToken } = tokenResponse.data; + localStorage.setItem('accessToken', accessToken); + localStorage.setItem('refreshToken', refreshToken); + axios.defaults.headers.common.Authorization = `${accessToken}`; + originRequest.headers.Authorization = `${accessToken}`; + return axios(originRequest); + } + } catch (error) { + if (axios.isAxiosError(error)) { + alert('로그인 후 이용해 주세요'); + } + } + } + + return Promise.reject(error); + }, +); export const getInstance = async (url: string, params?: any) => { try { const data = await instance.get(url, params); @@ -104,3 +155,61 @@ export const deleteInstance = async (url: string, body?: any) => { return error; } }; + +export const getPublicInstance = async (url: string, params?: any) => { + try { + const data = await publicInstance.get(url, params); + return data; + } catch (error) { + return error; + } +}; +export const postPublicInstance = async ( + url: string, + body: any, + params?: any, +) => { + try { + const data = await publicInstance.post(url, body, params); + return data; + } catch (error) { + return error; + } +}; +export const putPublicInstance = async ( + url: string, + body: any, + params: any, +) => { + try { + const data = await publicInstance.put(url, body, params); + return data; + } catch (error) { + return error; + } +}; + +export const patchPublicInstance = async ( + url: string, + body?: any, + params?: any, +) => { + try { + const data = await publicInstance.patch(url, body, params); + return data; + } catch (error) { + return error; + } +}; + +export const deletePublicInstance = async (url: string, body?: any) => { + try { + const config = { + data: body, + }; + const data = await publicInstance.delete(url, config); + return data; + } catch (error) { + return error; + } +}; diff --git a/src/api/get.ts b/src/api/get.ts index 5647d594..3af9b19c 100644 --- a/src/api/get.ts +++ b/src/api/get.ts @@ -1,4 +1,4 @@ -import { getInstance } from './axios'; +import { getInstance, getPublicInstance } from './axios'; //admin export const getAdminsUnpaidConsults = async () => await getInstance('/admins/unpaid-consults'); @@ -40,7 +40,9 @@ export const getDraftsLetter = async ( export const getLetterDeadline = async (letterId: string | undefined) => await getInstance(`/letters/deadline/${letterId}`); - +//Customer Controller +export const getCustomersNickname = async () => + await getPublicInstance('/customers/nickname'); //LetterMessage Controller export const getLetterMessages = async ( diff --git a/src/api/post.ts b/src/api/post.ts index a983ce97..a9363280 100644 --- a/src/api/post.ts +++ b/src/api/post.ts @@ -1,4 +1,4 @@ -import { postInstance } from './axios'; +import { postInstance, postPublicInstance } from './axios'; //Auth controller //로그인 export const postLogin = async (body: any) => @@ -10,6 +10,9 @@ export const postSingup = async (body: any) => export const postReissue = async (body: any) => await postInstance('/auth/reissue', body); +export const postPublicReissue = async (body: any) => + await postPublicInstance('/auth/reissue', body); + //Email controller //인증번호 전송 export const postEmails = async (body: any) => @@ -33,5 +36,5 @@ export const postLetterMessageFirstQustion = async (body: any) => //Counselor Controller // 퀴즈 통과 여부 수정 -export const postIsPassQuiz = async (body: any,parmas: any) => +export const postIsPassQuiz = async (body: any, parmas: any) => await postInstance('counselors/quiz', body, parmas); diff --git a/src/components/Buyer/BuyerSearch/SearchHeader.tsx b/src/components/Buyer/BuyerSearch/SearchHeader.tsx index b796bb85..c6dcd79c 100644 --- a/src/components/Buyer/BuyerSearch/SearchHeader.tsx +++ b/src/components/Buyer/BuyerSearch/SearchHeader.tsx @@ -26,7 +26,7 @@ export const SearchHeader = () => { { - navigate(-1); + navigate('/buyer'); }} /> diff --git a/src/pages/Buyer/BuyerCounselorProfile.tsx b/src/pages/Buyer/BuyerCounselorProfile.tsx index 086c5ae5..0f20d607 100644 --- a/src/pages/Buyer/BuyerCounselorProfile.tsx +++ b/src/pages/Buyer/BuyerCounselorProfile.tsx @@ -9,15 +9,15 @@ import { } from 'components/Buyer/BuyerCounselorProfile'; import { useEffect, useState } from 'react'; import { useParams } from 'react-router-dom'; -import { useSetRecoilState } from 'recoil'; import styled from 'styled-components'; -import { profileCounselorIdState } from 'utils/atom'; import { counselorDummyData as dummy } from 'utils/buyerDummy'; import { reviewDummy } from 'utils/buyerDummy'; import { CartegoryState } from 'utils/type'; export const BuyerCounselorProfile = () => { const { id } = useParams(); - + useEffect(() => { + const fetchData = async () => {}; + }, []); //Nav 버튼 toggle const [isInfo, setIsInfo] = useState(true); if (id !== undefined) { diff --git a/src/pages/Buyer/BuyerMypage.tsx b/src/pages/Buyer/BuyerMypage.tsx index 87f35e1e..b1e9b852 100644 --- a/src/pages/Buyer/BuyerMypage.tsx +++ b/src/pages/Buyer/BuyerMypage.tsx @@ -8,13 +8,27 @@ import { Characters } from 'utils/Characters'; import { ReactComponent as PayedIcon } from 'assets/icons/icon-mypage-payed.svg'; import { ReactComponent as ReviewIcon } from 'assets/icons/icon-mypage-review.svg'; import { ReactComponent as SavedIcon } from 'assets/icons/icon-mypage-saved.svg'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { Button } from 'components/Common/Button'; +import { getCustomersNickname } from 'api/get'; export const BuyerMypage = () => { const navigate = useNavigate(); //로그인 여부 temp - const [IsLoginTemp, setIsLoginTemp] = useState(true); - + const [IsLogin, setIsLogin] = useState(true); + //회원닉네임 + const [nickname, setNickname] = useState(''); + useEffect(() => { + const fetchNickname = async () => { + const res: any = await getCustomersNickname(); + if (res.status === 200) { + setNickname(res.data); + setIsLogin(true); + } else if (res.response.status === 401) { + setIsLogin(false); + } + }; + fetchNickname(); + }, []); return (
{ }} /> - {IsLoginTemp ? ( + {IsLogin ? ( <>
- 김고민고민 + {nickname}
{
서비스 소개
- {IsLoginTemp ? ( + {IsLogin ? ( <>
결제 문의 @@ -123,12 +137,6 @@ export const BuyerMypage = () => {
) : null} -