[React] Route / PrivateRoute(ProtectedRoute)

 

React 에서 Router 를 우선 사용해보자.
Router 를 사용하기 위해 npm 모듈을 설치한다.

npm i react-router-dom

/router/Router.tsx 파일을 작성한다.

import MainLayout from 'components/common-components/Layouts/MainLayout'
import { NotFoundView } from 'components/common-components/NotFoundView'
import Loggin from 'components/component/sign/Loggin
import { BrowserRouter, Routes, Route } from 'react-router-dom'

export default function Router() {
	return (
		<BrowserRouter>
			<Routes>
				{/* { 인증 여부 상관 없이 접속 가능한 페이지} */}
				<Route index element={<MainLayout />} />
				<Route path="/signin" element={<Loggin />} />
				<Route path="/*" element={<NotFoundView />} />
			</Routes>
		</BrowserRouter>
	)
}

 

App.tsx

import { GlobalStyle } from 'components/common-components/GlobalStyle'
import Router from 'router/Router'

function App() {
	return (
		<>
			<GlobalStyle />
			<Router />
		</>
	)
}

export default App

 

Router 에 대한 기본설정은 끝났다. 위의 GlobalStyle 은 styled-componet 에 관한 것이므로, 나중에 리뷰를 해보겠다.
(Router 와 상관 없음)

그러면 Router 에 이제 권한별 ( login / 혹은 기타 필요한 권한들 ) 이 필요할때 라우팅을 어떻게 작업해줘야 할까?

먼저 기본적인 로그인 여부에 관한 예시로 예를 들어보겠다.

/router/ProtectedRoutes.tsx

import { ReactElement } from 'react'
import { Navigate, Outlet } from 'react-router-dom'

interface PrivateRouteProps {
	children?: ReactElement
	authentication: boolean
}

export default function PrivateRoute({
	authentication,
}: PrivateRouteProps): React.ReactElement | null {
     // 로그인 했을 경우 true 
     // 로그인 하지않았을 경우 null or false
	const isAuthenticated = sessionStorage.getItem('isAuthenticated')

	if (authentication) {
		// 인증 필수
		return isAuthenticated === null || isAuthenticated === 'false' ? (
			<Navigate to="/login" />
		) : (
			<Outlet />
		)
	} else {
		// 인증 반드시 필수 x
		return isAuthenticated === null || isAuthenticated === 'false' ? (
			<Outlet />
		) : (
			<Navigate to="/" />
		)
	}
}

 

/router/Router.tsx

import MainLayout from 'components/common-components/Layouts/MainLayout'
import { NotFoundView } from 'components/common-components/NotFoundView'
import Loggin from 'components/component/sign/Loggin'
import { Testrouter } from 'components/component/Testrouter'
import { Counter } from 'features/counter/Counter'
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import ProtectedRoutes from './ProtectedRoutes'

export default function Router() {
	return (
		<BrowserRouter>
			<Routes>
				{/* { 인증 여부 상관 없이 접속 가능한 페이지} */}
				<Route index element={<MainLayout />} />
				<Route path="/signin" element={<Loggin />} />
				<Route path="/*" element={<NotFoundView />} />

				{/* { 인증을 반드시 하지 않아야만 접속이 가능한 페이지} */}
				<Route element={<ProtectedRoutes authentication={false} />}>
					<Route path="/login" element={<Loggin />} />
				</Route>

				{/* { 인증을 반드시 해야지만 접속 가능한 페이지 } */}
				<Route element={<ProtectedRoutes authentication={true} />}>
					<Route path="/test" element={<Testrouter />} />
					<Route path="/counter" element={<Counter />} />
				</Route>
			</Routes>
		</BrowserRouter>
	)
}

 

위와 같이 설정하면 권한별 라우팅 기능이 구현 가능하다.