React의 보호된 경로

보호되는 라우팅이란 무엇입니까?

보호된 경로는 특정 조건이 충족될 때만 액세스할 수 있는 경로입니다. 일반적으로 이러한 조건은

사용자가 인증되었는지 여부

사용자 세션이 만료되었는지 여부입니다.

보호 라우팅이 필요한 이유

해당 페이지를 볼 수 있는 액세스 권한이 없는 사용자로부터 특정 페이지를 보호하려면 보호된 라우팅이 필요합니다.

예를 들어

/home/profile 경로가 있고 이 페이지에서 사용자는 데이터를 변경할 수 있는 몇 가지 작업을 수행할 수 있습니다. 모든 사람이 이 페이지에 액세스할 수 있으면 이 페이지의 데이터는 더 이상 안전하지 않습니다. 이 문제를 해결하기 위해 보호 경로가 작동합니다.

손을 더럽히자

보호된 라우팅이 무엇인지 더 잘 이해하기 위해 코딩 예제를 살펴보겠습니다.

우리는 npx로 새로운 반응 프로젝트를 구축할 것입니다.

터미널에서 아래 코드를 실행하면 새로운 반응 프로젝트가 생성됩니다.

npx create-react-app protected-route-example

새로운 반응 프로젝트를 설정하는 방법에 대해 자세히 알아보십시오.
https://reactjs.org/docs/create-a-new-react-app.html

터미널에서 명령을 실행하여 방금 생성한 프로젝트로 이동하거나 GUI를 사용하여 프로젝트로 이동할 수도 있습니다.
cd protected-route-example
npx create-react-app에 의해 생성된 App.js의 상용구 코드 제거

리팩토링 후 App.js는 다음과 같아야 합니다.

function App() {
  return (
    <div>
    </div>
  );
}

export default App;

이제 프로젝트의 경로를 설정할 준비가 되었습니다.

react-router-dom 설치

npm install react-router-dom

react-router-domhttps://reactrouter.com/docs/en/v6에 대해 자세히 알아보기

패키지를 설치한 후 경로로 이동하기 위한 모든 시각적 링크를 포함하는 컨테이너/탐색 모음을 설정할 수 있습니다.

navbar.js라는 파일을 만듭니다.
navbar.js에 다음 코드를 추가합니다.

import React from 'react';
import { Link } from 'react-router-dom';

export default function () {
    return (
        <div style={{display: 'flex', flexDirection:'column',justifyContent: 'center'}}>
            <Link to="/home" >Home</Link>
            <Link to="/dashboard" >Dashboard</Link>
            <Link to="/contact-us" >Contact us</Link>
        </div>
    )
}

링크https://reactrouter.com/docs/en/v6/components/link에 대해 자세히 알아보기

이제 경로를 정의하고 app.js 파일에서 navbar를 렌더링해 보겠습니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from './navbar'
import Home from './home'
import ContactUs from './contactus'
import Dashboard from './dashboard'

function App() {
  return (
    <BrowserRouter>
      <Navbar/>
      <Routes>
        <Route
          path="/home"
          element={<Home/>}
        />
        <Route
          path="/contact-us"
          element={<ContactUs/>}
        />
        <Route
          path="/dashboard"
          element={<Dashboard/>}
        />

      </Routes>
    </BrowserRouter>
  );
}

export default App;

home.js, contactus.js 및 dashboard.js 생성

home.js

export default function Home(){
    return(
        <h1>Home</h1>
    )
}

contactus.js

export default function ContactUs(){
    return(
        <h1>Contact Us</h1>
    )
}

dashboard.js

export default function Dashboard(){
    return(
        <h1>Dashboard</h1>
    )
}

보호 경로 설정

이제 보호되는 경로를 설정할 수 있습니다. react의 useState 후크를 사용하여 사용자가 로그인했는지 여부를 설정합니다.
여기에서 반응 후크에 대해 자세히 알아보세요https://reactjs.org/docs/hooks-intro.html.

가짜 인증 설정

사용자가 로그인했는지 여부를 알려주는 가짜 인증 프로세스를 설정할 것입니다.
***usecse에 따라 업데이트할 수 있습니다.

app.js 파일 업데이트

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from './navbar'
import Home from './home'
import ContactUs from './contactus'
import Dashboard from './dashboard'
import { useState } from "react";
function App() {
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)
  return (
    <BrowserRouter>
      <Navbar/>
      {
        isUserLoggedIn?
        <button onClick={()=>setIsUserLoggedIn(false)}>Log out</button>:
        <button onClick={()=>setIsUserLoggedIn(true)}>Log In</button>
      }
      <Routes>
        <Route
          path="/home"
          element={<Home/>}
        />
        <Route
          path="/contact-us"
          element={<ContactUs/>}
        />
        <Route
          path="/dashboard"
          element={<Dashboard/>}
        />

      </Routes>
    </BrowserRouter>
  );
}

export default App;

이제 사용자가 보호된 페이지를 볼 수 있는 액세스 권한이 있는지 여부를 결정하는 보호된 경로 구성 요소를 만들 수 있습니다.

ProtectedRoute.js 파일 생성

ProtectedRoute.js

import { Navigate } from "react-router-dom";
export default function ProtectedRoute({isUserLoggedIn,children}) {
    if(!isUserLoggedIn) return <Navigate to="/"/>
    return children
}

이제 보호하려는 경로에 protectedRoute 구성 요소를 사용하십시오.

보호하려는 경로 업데이트

<Route
          path="/dashboard"
          element={
          <ProtectedRoute isUserLoggedIn={isUserLoggedIn}>
              <Dashboard/>
          </ProtectedRoute>
          }
        />

app.js 업데이트

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from './navbar'
import Home from './home'
import ContactUs from './contactus'
import Dashboard from './dashboard'
import { useState } from "react";
import ProtectedRoute from "./protectedRoute";

function App() {
  const [isUserLoggedIn, setIsUserLoggedIn] = useState(false)
  return (
    <BrowserRouter>
      <Navbar/>
      {
        isUserLoggedIn?
        <button onClick={()=>setIsUserLoggedIn(false)}>Log out</button>:
        <button onClick={()=>setIsUserLoggedIn(true)}>Log In</button>
      }
      <Routes>
        <Route
          path="/home"
          element={<Home/>}
        />
        <Route
          path="/contact-us"
          element={<ContactUs/>}
        />
        <Route
          path="/dashboard"
          element={
          <ProtectedRoute isUserLoggedIn={isUserLoggedIn}>
              <Dashboard/>
          </ProtectedRoute>
          }
        />

      </Routes>
    </BrowserRouter>
  );
}

export default App;

이제 대시보드 경로가 보호되며 로그인한 사용자만 액세스할 수 있습니다.

결론
위에 나열된 방법이 유용하다는 것을 알았습니까? 제안 사항이 있으면 의견에 남겨주세요.
이 블로그를 위한 것입니다. 읽어 주셔서 감사합니다.

그게 다 나에게서 온거야! 안녕히 계세요!