[React] 사용자 구분 인증 컴포넌트 만들기

사용자 권한에 따라 들어갈 수 있는 페이지와 없는 페이지를 제작해 보도록 하겠습니다.

 

다음은 구현을 위해 가정한 것입니다.

1. 권한을 단순하게 0 , 1 , 2 로 나눴습니다.

2. 유저 정보에 authority 라는 항목을 두어 권한을 부여했습니다.

3. 유저의 권한가 접속 권한보다 더 높거나 같으면 해당 페이지에 접속이 가능합니다.

 

먼저 app.js에서의 구성은 다음과 같습니다.

function App() {


// 컴포넌트를 연결시켜줄 함수
const destination = (user) => {
	return <Destination user={user} />;
};

// 사용자 권한 가정
const user = { authority: '2' };


// router 부분
return(
	<Routes>
		<Route path="/destination" element={<Auth Component={destination} user={user} cpAuth={'1'} />} />
	</Routes>
)
}

 

이제 Auth로 넘어가서 받아온 props로 권한을 비교하고 return 해주면 됩니다.

const Auth = ({ Component, user, cpAuth }) => {
	const [component, setComponent] = useState(null); // 일단 null을 리턴하고 비교가 끝나면 다시 rendering

	const navigate = useNavigate();
	useEffect(() => {
		const currentAuth = parseInt(user.authority);
		if (currentAuth >= cpAuth) { // 권한 비교
			setComponent(Component(user)); // 컴포넌트에 props 전달 가능
		} else {
			alert('접근 권한이 없습니다.');
			navigate('/');
		}
	}, [cpAuth, Component, navigate, user]);

	return component;
};

export default Auth;

 

정리

Auth 컴포넌트에 {원하는 컴포넌트를 반환하는 함수, 유저 정보, 입장 권한} 을 전달하고 유저 정보와 입장 권한을 비교해 유효하다면 함수를 실행시키고 유효하지 않다면 다시 '/' 주소로 돌아가도록 하였습니다.

 

전달 함수와 Auth에 user를 넣어준 것은 목적지 컴포넌트에서 유저 정보를 사용하고 싶었기 때문입니다.