API 연동하기 (토큰)

연동하기에는 많은 고민을 했지만 결국 결정한건 Axios로 하기로 했습니다.

Axios는 node.js와 브라우저를 위한 Promise 기반  HTTP 클라이언트 입니다.

 

간단하게 글로 작성하면

1. client에서 로그인을 실행하면

2. mysql DB에 저장된 email, password를 확인 후 accesstoken, refreshtoken을 발급합니다.

3. 해당 accesstoken이 발급되면서 로컬스토리지에 저장합니다.

4. 시간이 지나면 client의 accesstoken은 만료된 후 server에서 refreshtoken을 발급 받습니다.

5. 인증이 되고 해당 refreshtoken은 다시 로컬스토리지에 저장이 됩니다.

 

로그인 API 연동하기

로그인시 토큰을 발급받고 해당 토큰을 로컬스토리지에 저장하는 방법을 택했습니다.

const instance = axios.create({
	baseURL: "주소",
	timeout: 60000,
	headers: {
		"Content-Type": "application/json",
		Authorization: "accesstoken",
	},
})

사용자 지정 config를 활용하기 위해서 instance를 사용했습니다.

 

instance.interceptors.request.use((config) => {
	const accesstoken = axios.defaults.headers.common["Authorization"]
	storage.set({ key: "token", value: `Bearer ${accesstoken}` })
	return config
})

인터셉터를 활용하여 then, catch가 일어나기 전에 서버에 요청을 받아 토큰을 저장했습니다.

 

instance.interceptors.response.use(
  (response) => {
    return response
  },
  async (error) => {
    const {
      config,
      response: { status },
    } = error
    if (status === 401) {
      if (error.response.data.message === "TokenExpired") {
        const requests = config

        const { data } = await axios.post(`주소`)
        axios.defaults.headers.common["Authorization"] = `Bearer ${data}`
        requests.headers["Authorization"] = `Bearer ${data}`
        storage.set({
          key: "token",
          value: `Bearer ${data}`,
        })
        return axios(requests)
      }
    }
    return Promise.reject(error)
  }
)

1시간이 지남에 따라 토큰은 만료되고 다시 서버에 요청받아서 해당 토큰을 다시 로컬스토리지에 저장했습니다.

 

마무리

사실 이번에 작업을 하면서 token을 활용하여 로그인을 처음 진행해봤습니다... 완벽하지는 않습니다. 다시 보안할게 충분히 많다고 생각합니다.

조금만 검색해도 나오지만 해당 서버와의 연동부터 잘해야 했기때문에 나에게 맞추면서 사용하기가 많이 힘들었습니다.

앞으로 API연동은 계속해서 공부해가며 적용해 나가야 하겠습니다.

instance 뿐만아니라 then, catch 그리고 react-query 등을 활용해가며 다방면으로 대비해야 할 것 같습니다.

 

참조

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs

https://www.bezkoder.com/axios-interceptors-refresh-token/