[javascript] 리액트 라우터에서 인증(Authentication) 기능 구현 방법

22 Dec 2023

javascript

리액트 애플리케이션을 개발할 때, 사용자를 인증하고 권한 부여를 하는 것은 중요한 부분입니다. 리액트 라우터를 사용하여 이러한 인증 기능을 구현할 수 있습니다. 이 글에서는 리액트 라우터에서의 기본적인 인증(Authentication) 기능 구현 방법을 살펴보겠습니다.

1. 인증 상태 관리

사용자의 인증 상태를 관리하기 위해, 보통 Context API나 Redux와 같은 상태 관리 라이브러리를 사용합니다. 이 예제에서는 Context API를 사용하여 간단하게 인증 상태를 관리하는 방법을 살펴보겠습니다.

// AuthContext.js

import React, { createContext, useState } from 'react';

export const AuthContext = createContext();

const AuthProvider = ({ children }) => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);

  const login = () => {
    setIsAuthenticated(true);
  };

  const logout = () => {
    setIsAuthenticated(false);
  };

  return (
    <AuthContext.Provider value={{ isAuthenticated, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export default AuthProvider;

위의 예제 코드는 Context API를 사용하여 AuthContext를 생성하고, isAuthenticated 상태와 login, logout 함수를 제공하는 AuthProvider를 구현한 것입니다.

2. 프라이빗 라우트 구현

이제, 인증이 필요한 프라이빗 라우트를 구현해보겠습니다. 리액트 라우터의 Route 컴포넌트를 사용하여 인증 상태를 확인하고, 그에 맞게 컴포넌트를 렌더링할 수 있습니다.

// PrivateRoute.js

import React, { useContext } from 'react';
import { Route, Redirect } from 'react-router-dom';
import { AuthContext } from './AuthContext';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const { isAuthenticated } = useContext(AuthContext);

  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

export default PrivateRoute;

위의 예제 코드는 PrivateRoute 컴포넌트를 구현하여, AuthContext를 사용하여 인증 상태를 확인하고, 인증이 되어 있지 않다면 로그인 페이지로 리디렉션하는 방법을 보여줍니다.

이렇게하면, 리액트 라우터를 통해 간단하게 인증 기능을 구현할 수 있습니다.

위의 예제 코드는 리액트와 리액트 라우터를 기반으로 하고 있습니다. 실제 프로젝트에서는 보다 복잡한 인증 및 보안 기능이 필요할 수 있으므로, 추가적인 보안 측면에서의 고려가 필요합니다.

1. 인증 상태 관리

2. 프라이빗 라우트 구현

참고 자료