jwtToken

9.27 (금)

1. extraReducers

export const postSigninThunk = createAsyncThunk('postSigninThunk', postSignin)


const signinSlice = createSlice({
    name: "signin",
    initialState: initialState,
    reducers: {
        signin: (state, action) => {
            console.log("signin state: "+state, action);
            const email = action.payload.username
            const result =  {email:email}

            cookies.set("member", JSON.stringify(result), {path:"/", maxAge: 60*60*24*7}) // stringify: 자바의 객체를 문자열로 변경하기 위해

            return result
        },
        signout: (state, action) => {
            console.log("signout state: "+state, action);
            return {...initialState}
        },

    },
    extraReducers: builder => { // 상태를 직접관리할필요가 없어서 extraReducers를 사용 / 비동기상태를 신경쓸필요가 없다.
        builder
            .addCase(postSigninThunk.fulfilled, (state,action) => { // fulfilled는 다 되었다면 이라는뜻
                console.log("postSigninThunk.fulfilled")


                const result = action.payload
                return result
            })
            .addCase(postSigninThunk.pending, (state,action) => { // pending은 로딩중 이라는 뜻
                console.log("postSigninThunk.pending")
            })
    }
})

👉 export를 보면 postSigninThunk라는 이름으로 postSignin을 사용하겠다는 내용이 있는데, postSignin은 api서버에서 사용되는 로그인메소드 이름이다.

👉 기존의 reducers아래에 작성되는 extraReucers는 현재 작성된 reducers와 다르게 API서버를 통한 비동기 작업을 진행할때 사용되는것으로 비동기작업 특성상 시간차가있으므로 요청응답 및 요청대기와 같은 표현을 할수있으므로 시각적으로 좋다

👉 현재 코드에서는 postSigninThunk는 API함수를 호출하여 서버에 로그인 요청을 보내는 비동기작업이므로 extraReducers를 사용중이다

👉 fulfilled : 로그인 요청성공시 사용자 정보를 상태에 저장

const result = action.payload // 결과값을 상태에저장
                return result

👉 pending : 요청이 진행중일때 로딩 상태 처리

console.log("postSigninThunk.pending") // 로딩중

1-1. useSignin.ts

import {useAppDispatch, useAppSelector} from "./rtk.ts";
import {ISigninParam} from "../types/member.ts";
import {postSigninThunk, signin, signout} from "../slices/signinSlice.ts";
import {Cookies} from "react-cookie";


const cookies = new Cookies();

const loadCookie = () => {

    const memberCookie = cookies.get("member",{path:'/'}) // 쿠키를 가져와서

    console.log("Cookie",memberCookie)

    return memberCookie; //쿠키를 리턴해주는것
}

const useSignin = () => {

    const dispatch = useAppDispatch();

    let member = useAppSelector(state => state.signin) // email의 상태

    if(!member.email){ // 새로고침해서 현재 member의 email값이 없을때 리턴된 쿠키값이 member에 받게되는것.
        member = loadCookie()
    }

    const doSignin = (param:ISigninParam) => {

        dispatch(postSigninThunk(param)).unwrap().then( data => {
            console.log(data)
            cookies.set("member",data,{path:"/"})
        })
    }

    const doSignout = () => {

        dispatch(signout(null))
        cookies.remove("member",{path:'/'})
    }

    return{member, doSignin, doSignout}
}
export default useSignin

👉 이곳에서 중점으로 봐야할점은 doSignin인데, 결국 api서버에있는 제대로된 username과 pw를 사용한다는 말이 되는것이고, unwrap을 이용해서 로그인 성공 및 실패에 대한 데이터 처리를 쉽게 할 수 있다.

---

2. jwtToken

2-1. ProductAPI.ts

import jwtAxios from "../util/jwtUtil.ts";


const host:string = 'http://localhost:8090/api/products'


export const postAdd = async (formData: FormData): Promise<number> => {

    const res = await jwtAxios.post(`${host}/`, formData)

    return Number(res.data.result)

}

export const getList = async ( page:number = 1, size:number = 10) => {

    const res = await jwtAxios.get(`${host}/list?page=${page}&size=${size}`)

    return res.data
}

👉 일반적인 axios를 사용했었지만, product예제부터는 token을 이용한 인증관련서비스가 들어가므로 jwt(token)을 효율적으로 관리하기 위함 - 토큰자동추가, 갱신처리등

---

3. AccessToken / RefreshToken

👉 해당 토큰들에 대한 이해가 필요하므로 설명부터 진행하겠다. accessToken은 데이터를 읽기위해 필요한 입장권 같은 역할을 한다. 하지만 이 토큰은 만료시간이 10분으로 짧기 때문에 만료가 되면 재 발급을 받아야하는데, 관련된 또다른 인증을 받는것에 대한 번거로움 때문에 AccessToken이 발급이 되는동시에 만료기간이 긴 RefreshToken을 같이 발급해준다

👉 그렇게 AccessToken이 만료되게 되면 AccessToken과 RefreshToken을 가져갔을때, 새로운 Access/Refresh Token을 주는 스타일이다.

3-1. memberAPI.ts

import {IMember, ISigninParam} from "../types/member.ts";
import axios from "axios";


const host:string = 'http://localhost:8090/api/member'

export const postSignin = async (param:ISigninParam):Promise<IMember> => { //id,pw값을 주면 email값 return

    const res = await axios.post(`${host}/login`,
        param,
        {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})

    return res.data
}

export const refreshRequest = async (accessToken:string, refreshToken:string):Promise<IMember> => { // access 만료돼서 access,refresh줘야함


    const res = await axios.get(`${host}/refresh?refreshToken=${refreshToken}`, {
        headers: {'Authorization ': `Bearer ${accessToken}`},
    })

    console.log(res.data)

    return res.data
}

👉 API에서 postSignin에서는 해당되는 username, pw를 주게되면 각 token들을 발급해주는역할을하고

👉 refreshRequest에서는 만료된 accessToken과 당시에 받은 refreshToken을 주게되면 새로운 access,refresh Token을 발급해주는 역할을 한다.

3-2. useSignin.ts

    const doSignin = (param:ISigninParam) => {

        dispatch(postSigninThunk(param)).unwrap().then( data => {

            cookies.set("member",data,{path:"/"})
        })
        console.log(cookies)
    }

👉 그러면 useSignin에서 api서버의 메서드를 호출하여 토큰들을 cookie에 넣어준다.

3-3.jwtUtil.ts

import axios, {AxiosResponse, InternalAxiosRequestConfig} from "axios";
import {Cookies} from "react-cookie";
import {refreshRequest} from "../api/memberAPI.ts";

const cookies = new Cookies();

const jwtAxios = axios.create() // jwt로직을 사용한다.

const beforeReq = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig => { // 요청이 서버에 보내지기 전에 호출

    console.log("beforeReq============")

    const memberCookie = cookies.get("member", {path:"/"}) // 쿠키읽기

    if(!memberCookie) { // 쿠키가 없다면 요청을 거부한다.
        return Promise.reject("cookie is not found")
    }

    console.log(config)

    const accessToken = memberCookie.accessToken // signinSlice에서 발급된 쿠키
    // 쿠키가 총 두군데에서 발급이되는데 signinSlice는 로그인요청후에 사용자 정보저장용 - 하지만 extrareducers를 사용하므로 reducers의 cookie는 사용되지않음
    // useSignin쿠키는 새로고침해서 쿠키가 사라질때 쿠키정보 읽어오는 복원역할 근데 두개다 같은 member쿠키

    console.log("at",accessToken)

    if(accessToken){
        config.headers.Authorization = `Bearer ${accessToken}`
    }


    return config
}

const failReq = (error:any) => { // 요청에러 발생시
    console.log("failReq=============")

    return Promise.reject(error)

}
const beforeRes = async (res: AxiosResponse): Promise<AxiosResponse> => { // 응답 보내기전, 200ok
    console.log("beforeRes===============")


    const data = res.data // res에는 list같은 데이터 값이 들어가는데, 토큰시간이 만료되면 error_access token이라는 메세지가 들어가있다.

    if(data.error === 'ERROR_ACCESS_TOKEN') {
        console.log("access token에 문제가 있으므로 refresh 필요")

        const memberCookie = cookies.get("member", {path: "/"})
        const {accessToken, refreshToken} = memberCookie

        const refreshResult = await refreshRequest(accessToken, refreshToken) // api서버의 refreshRequest를 통해서 새로운 토큰들을 받기

        console.log("refresh", refreshResult)

        memberCookie.accessToken = refreshResult.accessToken // 새로받은 쿠키들을 넣기
        memberCookie.refreshToken = refreshResult.refreshToken

        cookies.set("member", memberCookie, {path: "/", maxAge: 60 * 60 * 24 * 7})

        const originalRequest = res.config
        originalRequest.headers.Authorization = `Bearer ${accessToken}`

        return await axios(originalRequest)


    }


    return res

}
const failRes = (error:any) => {
    console.log("failRes=============")

    return Promise.reject({response: {msg:error.message}})

}


jwtAxios.interceptors.request.use(beforeReq, failReq)

jwtAxios.interceptors.response.use(beforeRes, failRes)

export default jwtAxios

👉 해당코드를 분석해보자면 jwtUtil은 총 4가지로 분리되어있다.

• beforeReq : 요청이 서버에 보내지기 전에 호출이된다
  👉 주로 쿠키가 있는지 확인하여 쿠키가 있다면 쿠키내부에 accessToken을 확인해서, config.header내부에 accessToken을 넣어주는 역할

• failReq : 요청을 하던중에 에러가 발생할때 호출이된다

• beforeRes : 응답이 클라이언트로 보내지기 전에 호출된다.
  👉 주로 accessToken이 만료되어서 api서버에 있는 refresh관련 메소드를 호출하여 access/refreshToken을 전달하면 새로운 토큰들을 받게되고, 새로운 토큰들을 쿠키에 다시 넣어주고, Req에 마지막에 했었던 config.header내부에 accesToken을 넣어주는 역할

• faliRes : 응답 처리 중에 오류가 발생했을 때 호출된다.

---

4. ReactQuery

👉 상태관리 라이브러리

📌 npm i @tanstack/react-query
📌 npm i @tanstack/react-query-devtools

4-1. main.tsx

import { createRoot } from 'react-dom/client'
import './index.css'
import {RouterProvider} from "react-router-dom";
import mainRouter from "./router/mainRouter.tsx";
import {Provider} from "react-redux";
import projectStore from "./store.ts";
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";

const queryClient = new QueryClient();

createRoot(document.getElementById('root')!).render(

    <QueryClientProvider client={queryClient}>
        <Provider store={projectStore}>
            <RouterProvider router={mainRouter}></RouterProvider>
        </Provider>
        <ReactQueryDevtools initialIsOpen={true}></ReactQueryDevtools>
    </QueryClientProvider>
)

👉 queryClient 객체생성해주고, ReactQueryDevtools 태그와, QueryClientProvider 태그를 main.tsx에 포함시켜준다.

---

4-2. React-Query example

import {useQuery} from "@tanstack/react-query";
import {getList} from "../../api/ProductAPI.ts";

function ProductListPage() {

    const {} = useQuery({
        queryKey: ['product','list',1],
        queryFn: () => getList(1,10),
        staleTime: 1000*10
    })

    return (
        <div>
            <div>Product List page</div>
        </div>
    );
}

export default ProductListPage;

👉 해당 코드부터 설명을 하자면, useQuery내부에

• queryKey : 배열로 뎁스를 나타낸것이다. 현재 tsx는 ProductListPage으로 product / list / 1번페이지 를 나타냄

• queryFn : API서버의 getList메서드에 1,10의 매개변수를 넣은 값을 호출한다

• staleTime : 신선도 파악 10초까지는 이 데이터가 신선하다고 판단되어 해당 페이지 및 api호출을 하지 않지만, 10초가 지난 이후에는 자동으로 리로드된다.

---

4-3. React-query another example

import {useQuery, useQueryClient} from "@tanstack/react-query";
import {getList} from "../../api/ProductAPI.ts";
import LoadingComponent from "../../common/LoadingComponent.tsx";
import {useSearchParams} from "react-router-dom";

function ProductListPage() {

    const [query,setQuery] = useSearchParams()

    const page: number = Number(query.get("page")) || 1

    const {isFetching} = useQuery({
        queryKey: ['product/list', page],
        queryFn: () => getList(page,10),
        staleTime: 1000*10
    })

    const queryClient =  useQueryClient()

    const changePage = (pageNum: number) => {

        if(page === pageNum){
            queryClient.invalidateQueries('product/list')
        }

        query.set("page", String(pageNum))
        setQuery(query)
    }

    return (
        <>
            <ul className='text-3xl'>
                <li className='text-3xl b-2 m-2 p-2 bg-blue-500'
                    onClick={()=> changePage(1)}>1</li>
                <li className='text-3xl b-2 m-2 p-2 bg-blue-500'
                    onClick={()=> changePage(2)}>2</li>
                <li className='text-3xl b-2 m-2 p-2 bg-blue-500'
                    onClick={()=> changePage(3)}>3</li>
            </ul>
        {isFetching&& <LoadingComponent/>}
        <div>
            <div>Product List page</div>
        </div>
    </>
    );
}

export default ProductListPage;

👉 현재코드에서는 getList메서드를 api서버에서 호출하는데, page에 따른 호출이 가능한 상태이다. useSearchParams를 이용하여 url의 page값을 불러와 상태관리를 하고, changPage메서드를 이용하여 클릭시 페이지가 변경된다. 또한 useQueryClient를 사용하게 되면 현재페이지와 내가 선택한 페이지가 동일할때 url이 동일하더라도 리로드 되도록 쿼리를 무효화한다.

👉 또한 isFeaching 을 통해 현재 메소드가 실행되고 있을때 LoadingComponent를 출력할수있도록 구조화 할 수 있다.

---

5. jwtToken Access / Refresh Token API 사용법

• 로그인

POST - http://localhost:8090/api/member/login
body - (x-www-from-urlencoded)로
key: username / value: user1@aaa.com
key: password / value: 1111

send

accessToken / refreshToken을 받을 수 있다.

• 호출

GET - http://localhost:8090/api/products/list
Headers
key: Authorization / value: Bearer (accessToken)

send

결과값 받을수있다

• accessToken 만료

GET - http://localhost:8090/api/member/refresh?(refreshToken)
Headers
Key: Authorization / value: Bearer (만료된 accessToken)
Body
Key:refreshToken