[React-Router] 로그인 권한에 따른 페이지 접근 막기

로그인이 되어 있지 않은 상태이면 페이지에 따라 접근을 막아야 하는데  

메뉴탭은 로그인 상태에 따라 나타나지 않게 했지만 

url로 들어가게 되면 막을 수가 없기 때문에 이에 따른 페이지 접근을 막아야 한다.

 

React-Router v6로 진행한 방법

 

 

redux로 현재 로그인 상태 확인하기

그래서 현재 로그인한 사용자의 권한을 access에 할당해준다

난 authority 값으로 확인을 하였는데

 

이 페이지들을 관리하는 master

이 페이지를 이용하는  vendor

그리고 로그인을 하지 않으면 ' '이나 undefined로 나타난다.

 

 

App.js

// 로그인 여부 확인하기

  const loginInfo = useSelector((state) => state.loginInfo);
  const access = loginInfo.authority;
  
  
  
  ---------------------
//현재 redux에서 loginInfo의 형태는 아래와 같이 불러와 진다

//  loginInfo : {
//	authority : master,
//	id : admin,
// }

 

 

여기서는 master만 들어갈 수 있는 페이지를 감싸줄 컴포넌트이다

만약 master가 아닌 사람이 들어가려 한다면

'접근할 수 없는 페이지입니다' alert을 띄워주고 홈으로 이동할 수 있도록 한다.

PrivateMasterRoute.jsx 

import React from "react";
import { Navigate } from "react-router-dom";

const PrivateMasterRoute = ({ authenticated, component: Component }) => {
  return authenticated === "master" 
  ? Component 
  : <Navigate to="/" {...alert("접근할 수 없는 페이지입니다.")} />;
};

export default PrivateMasterRoute;

 

PrivateVendorRoute.jsx

- vendor 사용자만 들어갈수 있게 만드는것도 위 코드에서 master를 vendor로만 바꾸면 된다

 

master, vendor 두 사용자가 들어갈 수 있되 로그인이 안되어있으면 못 들어가게 막아 주어야 하는 페이지이다

 

 

 

PrivatePublicRoute.jsx

 

로그인이 안되어 있는 상태에선 authenticated가 빈 값이거나 undefined로 띄워진다

아래처럼 !!authenticated로 작성이 되어있으면 

"" , false, NaN, undefined, null, 0 중 하나일 때  false를 리턴해준다고 한다.

import React from "react";
import { Navigate } from "react-router-dom";

function PrivatePublicRoute({ authenticated, component: Component }) {
  return !!authenticated 
  ? Component 
  : <Navigate to="/" {...alert("접근할 수 없는 페이지입니다.")} />;
}

export default PrivatePublicRoute;

 

 

 

 

App.js

import { Route, Routes } from "react-router-dom";
import { useSelector } from "react-redux";

// 페이지
import Home from "./Home";
import VendorPublic from "./VendorPublic";
import PrivateMaster from "./PrivateMaster";
import PrivateVendor from "./PrivateVendor";


// 컴포넌트 
import PrivatePublicRoute from "./PrivatePublicRoute";
import PrivateVendorRoute from "./PrivateVendorRoute";
import PrivateVendorRoute from "./PrivateVendorRoute";


function App() {
	//로그인 여부 확인하기
  const loginInfo = useSelector((state) => state.loginInfo);
  const access = loginInfo.authority;


  return (
    <Routes>
		//element 안에 위 컴포넌트로 넣어주면 된다
      <Route path="/" element={<Home />} />
      <Route path="/private" element={<PrivatePublicRoute authenticated={access} component={<PrivateMaster />} />} />
      <Route path="/private" element={<PrivatePublicRoute authenticated={access} component={<PrivateVendor />} />} />
      <Route path="/vendor" element={<PrivatePublicRoute authenticated={access} component={<VendorPublic />} />} />
    </Routes>
  );
}

export default App;