React 관리 페이지 구현 – 환경 변수로 숨기기

by

React로 웹 사이트를 생성할 때, 서비스의 전체 데이터를 검색하거나 삭제할 때, 요청 내용을 볼 때

관리자 페이지를 구현해야 하는 순간이 있습니다. 관리자 페이지를 만드는 방법에 대한 정답은 없지만 프로젝트를 구현하는 방법

적용된 방법과 궁금증을 풀어가며 단계별로 React로 관리 페이지를 구현하는 방법을 알아보자.

관리자 페이지는 어디에 있습니까?

'추천 관련글,

관리자 대시보드 페이지 도메인은 실제 사용자가 사용하는 서비스 페이지와 분리되어 하나의 도메인으로 가능

관리자 아이디와 일반 사용자 아이디를 분리하여 관리자 아이디라면 관리자 페이지로 이동하는 버튼이나 링크가 보이도록 할 수 있습니다.

후자의 경우로 서비스를 구현했습니다. 관리자 페이지에 액세스하기 위해 특정 링크 또는 버튼을 넣을 위치

답이 없다고 생각합니다. 다만, 로그인한 사용자만 접근할 수 있는 특정 페이지에 관리자 페이지로 연결할 수 있는 버튼을 포함시켰습니다.


미리 정의된 관리자 ID로 로그인하면 표시되는 사용자 인터페이스

일반 사용자 ID로 접속 시 표시되는 UI 화면

물론 도메인을 따로 분리하는 것이 보안상 더 안전할 수 있지만 구현의 편의성은 후자에 있는 것 같습니다. 그럼 도메인에 관리 페이지를 안전하게 구현하는 방법에 대해 알아보겠습니다.

보안을 염두에 두고 관리 페이지를 구현해 봅시다.

관리자 페이지를 표시하도록 라우팅이 명시적으로 설정된 경우 “/admin”인 경우가 많습니다.

관리자 계정이 아닌 악의적인 목적으로 웹사이트에 다른 경로를 입력하고 전처리를 하지 않으면 내 요청 내역을 볼 수 있습니다.

데이터 조작 권한이 있는 페이지로 리디렉션됩니다. 나는 그것에 대해 조금 나중에 이야기 할 것입니다

먼저 일반 사용자와 관리자를 구분하여 관리자 페이지에 연결할 수 있는 버튼이나 링크를 조건부로 렌더링합니다.

	 if (
          email === process.env.REACT_APP_ADMIN_EMAIL &&
          username === process.env.REACT_APP_ADMIN_NAME
        ) {
          setIsAdmin(true);
        }
 		
        .
        .
        .
        <div>
          <Link to="edit">내 정보 수정하기</Link>
          {isAdmin ? <Link to="/admin">관리자페이지</Link> : null}
        </div>
        .
        .
        .

useState를 사용하여 환경 변수를 설정할 수 있는 .env 파일에서 관리자 계정의 암호, 닉네임 또는 암호를 찾을 수 있습니다.

현재 로그인되어 있고 자격 증명이 환경 변수에 설정된 문자열과 일치하면 isAdmin이 업데이트됩니다.

로그인 시 요청하는 것은 이메일, 사용자 닉네임과 비밀번호이기 때문에 이메일과 닉네임의 중복은 허용되지 않습니다.

관리자 계정 유효성 검사를 이메일과 사용자 이름의 두 가지로 그룹화했습니다. 상황에 따라 가장 적합한 방법을 사용하십시오.

관리자 페이지에서 다시 확인

모르는 경우를 대비하여 관리자 페이지에서도 유효성 검사를 수행할 수 있습니다.

관리자가 아닌 사람이 어떤 이유로 관리자 페이지에 접속하면 다시 점검이 이루어지며, 관리자가 아닌 사람이

사용자를 홈 화면으로 다시 보냅니다.

useEffect(() => {
    setLoading(true);
    fetch(`localhost:8080/api/tokenInspect`, {
      method: "GET",
      credentials: "include",
    }).then((response) => {
      if (!response.ok) {
        alert("잘못된 접근입니다.");
        navigater("/");
      }
      return;
    });
 }

Nodejs는 쿠키에 포함된 토큰을 사용하여 토큰을 다시 검증합니다. 서버의 응답이 올바르지 않은 경우

경고 메시지가 나타난 후 useNavigate를 사용하여 사용자를 기본 화면으로 되돌립니다. 유효성 검사 과정에서

관리자 화면이 렌더링되는 것을 방지하기 위해 useState로 로딩이 완료되었는지 확인합니다.