axios 인터셉터(TypeScript)를 사용하여 인증 로그인 시스템을 생성하는 방법 1부

안녕하세요 여러분!

이 기사에서는 axios 인터셉터를 사용하는 인증 시스템의 작은 프로세스를 공유하고 있습니다. 아래 개념은 이메일 또는 비밀번호를 제출할 때 해당 사용자가 서버에 존재하는지 확인하고 사용자가 인증되면 사용자가 다른 페이지로 이동할 수 있다는 것입니다.

인터셉터에 대한 추가 정보를 확인할 수 있습니다here.

SignIn 구성 요소 내에서 단순히 게시 요청을 수행할 수 있지만 언젠가는 axios가 더 이상 존재하지 않고 한 곳에서 사용한 것을 변경할 수 있지만 그 뒤에 있는 논리가 아닌 경우 인터셉터가 방법입니다. 가다. 또한 이것은 최근 [MVP] - 최소 실행 가능 제품 - LINK 이라는 개념으로, 여전히 그것에 대해 알아보려고 노력하고 있지만 알아두면 좋습니다.

그건 그렇고, 기사는 그것이 어떻게 작동하는지에 대한 아이디어를 제공하고 있습니다. 물론 당신은 당신 자신의 비트와 조각, API 등을 추가해야 할 것입니다...

그러니 한 걸음 뒤로 물러나 봅시다.

아래에서 공유하는 내용은 다음과 같습니다.

서버와의 연결을 설정합니다.

서비스 레이어 생성

서버로 설정

API와의 연결인 클라이언트를 생성합니다.

REACT_APP_API_URL 아래에는 .env 파일 또는 .env.local에 저장된 자체 API가 있을 수 있습니다.

interface ConfigType {
  ApiUrl: string
}

const config: ConfigType = {
  ApiUrl: process.env.REACT_APP_API_URL || '',
}

export default config

여기에 우리의 http-client file.

import axios from 'axios'
import config from './config'
import setupInterceptorsTo from './http-client-interceptor'

const instance = axios.create({
  baseURL: config.ApiUrl,
  headers: {
    'Content-type': 'application/json',
  },
})

export default setupInterceptorsTo(instance)

서비스 레이어 생성

아래에는 항상 다른 유형의 오류가 있기 때문에 오류 메시지를 처리할 인터셉터가 있습니다.

import { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios'
import { toast } from 'react-toastify'
import { isObject, isEmpty } from 'lodash'

const API_DEFAULT_MESSAGE_REQUEST = 'The request is invalid'

function handleError(serverError: any) {
  if (isObject(serverError)) {
    Object.entries(serverError).forEach(([, value]) => {
      const errorMessage = isEmpty(value) ? API_DEFAULT_MESSAGE_REQUEST : value
      toast.error(`${errorMessage}`)
    })
  }
}

const onRequest = (config: AxiosRequestConfig): AxiosRequestConfig => {
  return config
}

const onResponseError = (error: AxiosError): Promise<AxiosError> => {
  handleError(error?.response?.data)
  return Promise.reject(error)
}

export default function setupInterceptorsTo(axiosInstance: AxiosInstance): AxiosInstance {
  axiosInstance.interceptors.request.use(onRequest, undefined)

  axiosInstance.interceptors.response.use(undefined, onResponseError)

  return axiosInstance
}

여기서 우리는 실제로 서버에 요청을 보냅니다. 이 경우 게시 요청입니다.

import { BehaviorSubject } from 'rxjs'
import { isNull } from 'lodash'
import httpClient from '../../shared/http-client'

interface LoginRequestModel {
  email: string
  password: string
}

const currentUserSubject = isNull(localStorage.getItem('current_user'))
  ? new BehaviorSubject(null)
  : new BehaviorSubject(JSON.parse(localStorage.getItem('current_user')!))

export const currentUserValue = currentUserSubject.value

export async function login(requestData: LoginRequestModel): Promise<string> {
  const response = await httpClient.post('/auth/login', requestData)

  const { access_token: accesstoken } = response.data

  return accesstoken
}

마지막으로 SignIn 구성 요소에서 로그인 기능을 호출할 수 있으며 비동기 방식으로 사용하기만 하면 됩니다. where await login(data) . 위의 기능에 대한 스키마가 있고 우리를 위해 모든 작업을 수행하므로 그것이 얻는 유일한 입력입니다.