React-Router 를 사용 하여 전단 경로 감 권 의 예제 코드 를 실현 합 니 다.

React-Router은 React 생태 에서 매우 중요 한 일환 이다.현재 React 의 단일 페이지 응용 경 로 는 대체적으로 전단 에서 스스로 관리 하 는 것 이지 예전 처럼 백 엔 드 경로 가 아니 라 React 관리 경로 의 라 이브 러 리 에서 자주 사용 하 는 것 이 바로React-Router이다.본 고 는React-Router의 사용 을 쓰 고 싶 지만 API 를 소개 하 는 것 만으로 도 너무 평범 하고공식 문서잘 썼 습 니 다.흔히 볼 수 있 는 개발 장면 으로React-Router를 어떻게 사용 하 는 지 보 겠 습 니 다.일반적인 시스템 은 사용자 접근 권한 의 제한 이 있 습 니 다.일부 페이지 는 사용자 가 일정한 권한 을 가 져 야 접근 할 수 있 습 니 다.본 고 는React-Router으로 전단 감 권 모델 을 실현 하 는 것 이다.
본 논문 의 모든 코드 가 GitHub 에 올 라 왔 으 니 여러분 은 내 려 서 놀 수 있 습 니 다.https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-usage
응용 예시
본 고 에서 실현 하고 자 하 는 기능 은 모두 가 자주 만 나 는 장면 이다.바로 서로 다른 사용자 역할 을 통제 하여 서로 다른 페이지 를 방문 하 는 것 이다.여 기 는 모두 네 개의 페이지 가 있다.

/index:사이트 첫 페이지

/로그 인:로그 인 페이지

/backend:백 엔 드 페이지

/admin:관리 페이지

그리고 세 가지 캐릭터 가 있다.

미등 록 사용자:사이트 홈 페이지/index 와 로그 인 페이지/login

만 방문 할 수 있 습 니 다.

일반 사용자:사이트 홈 페이지/index,로그 인 페이지/login 과 배경 페이지/backend

를 방문 할 수 있 습 니 다.

관리자:관리 페이지/admin 및 기타 모든 페이지 에 접근 할 수 있 습 니 다

React-Outer 도입
경로 감 권 을 실현 하려 면 한 걸음 한 걸음 더 해 야 합 니 다.우 리 는 먼저 React-Outer 로 이 몇 페이지 가 있 는 간단 한 프로젝트 를 구축 해 야 합 니 다.우 리 는 직접create-react-app으로 새 프로젝트 를 만 든 다음 에pages폴 더 를 만 들 었 습 니 다.그 안에 우리 가 앞에서 말 한 몇 개의 페이지 를 넣 었 습 니 다.

우리 페이지 는 먼저 간단하게 쓰 고 먼저 제목 을 쓰 자.예 를 들 어 다음 과 같다.

import React from 'react';

function Admin() {
 return (
 <h1>     </h1>
 );
}

다른 몇 페이지 도 비슷 하 다.
그 다음 에 우 리 는App.js에 도입React-Router을 경로 로 전환 할 수 있 습 니 다.브 라 우 저 에서 사용 하 는 것 은react-router-dom입 니 다.새 버 전React-Router은 핵심 논리 층 과 전시 층 을 분리 시 켰 습 니 다.핵심 논 리 는 경로 가 일치 하 는 등 전시 층 은 실제 점프 와 경로 변화 에 대한 감청 을 처리 합 니 다.이렇게 나 누 는 이 유 는...React-Router 는 브 라 우 저 뿐만 아니 라 React Native 도 지원 해 야 하기 때 문 입 니 다.이 두 플랫폼 의 감청 과 점프 는 다 르 기 때문에 현재React-Router아래 에 여러 개의 가방 이 있 습 니 다.

react-router:핵심 논리 처리,공용 기본 클래스 제공

react-router-dom:브 라 우 저 와 관련 된 경로 감청 과 점프 를 구체 적 으로 실현

react-router-native:RN 과 관련 된 경로 감청 과 점프 를 구체 적 으로 실현

실제 사용 할 때 우 리 는 일반적으로 인용react-router이 아니 라 직접 사용react-router-dom하면 된다.왜냐하면 그것 은 스스로 인용react-router하기 때문이다.다음은 프로젝트 에 도입 하 겠 습 니 다react-router-dom.

import React from 'react';
import {
 BrowserRouter as Router,
 Switch,
 Route,
} from "react-router-dom";
import Home from './pages/Home';
import Login from './pages/Login';
import Backend from './pages/Backend';
import Admin from './pages/Admin';

function App() {
 return (
 <Router>
  <Switch>
  <Route path="/login" component={Login}/>
  <Route path="/backend" component={Backend}/>
  <Route path="/admin" component={Admin}/>
  <Route path="/" component={Home}/>
  </Switch>
 </Router>
 );
}

export default App;

그리고Home페이지 에Link다른 페이지 로 이동 하 는 링크 를 추가 하면 점프 할 수 있 습 니 다.

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

function Home() {
 return (
 <>
  <h1>  </h1>
  <ul>
  <li><Link to="/login">  </Link></li>
  <li><Link to="/backend">  </Link></li>
  <li><Link to="/admin">   </Link></li>
  </ul>
 </>
 );
}

export default Home;

지금까지 우리 의 응용 프로그램 이 실 행 된 것 은 다음 과 같다.

모듈 구분
비록 우리 의 도약 이 실현 되 었 지만 모든 사람 이 모든 페이지 를 방문 할 수 있 습 니 다.우리 앞의 수 요 는 로그 인 한 캐릭터 에 따라 방문 하 는 페이지 를 제한 하 는 것 입 니 다.코드 를 쓰기 전에 우 리 는 어떻게 해 야 할 지 먼저 생각 합 니 다.물론 가장 직관 적 이 고 가장 간단 한 방법 은 모든 페이지 에서 현재 사용자 의 역할 을 검 측 하고 일치 하지 않 으 면 잘못 보고 하거나 첫 페이지 로 돌아 가 는 것 이다.우 리 는 지금 몇 페이지 밖 에 없 는데 이렇게 하 는 것 도 괜 찮 은 것 같 습 니 다.그러나 우리 의 응용 이 커지 고 페이지 가 많아 지면 모든 페이지 가 한 번 씩 검 사 를 하면 중복 되 기 때문에 우 리 는 각 도 를 바 꾸 어 이 문 제 를 생각해 야 합 니 다.
자세히 보면 우 리 는 모두 세 가지 역할 에 대해 세 가지 서로 다른 권한 에 대응 합 니 다.이 세 가지 권한 은 등급 관계 도 있 고 높 은 등급 의 권한 은 낮은 등급 의 권한 을 포함 하기 때문에 우리 의 페이지 도 이런 권한 에 따라 세 가지 로 나 눌 수 있 습 니 다.

공공 페이지:모든 사람 이 방문 할 수 있 고 로그 인하 지 않 아 도 방문 할 수 있 습 니 다.사이트 홈 페이지 와 로그 인 페이지

를 포함 합 니 다.

일반 페이지:일반 로그 인 사용자 가 방문 할 수 있 는 페이지

관리자 페이지:관리자 만 접근 할 수 있 는 페이지

이 세 가지 페이지 를 잘 관리 하기 위해 서 우 리 는 그들 을 세 개의 파일 로 추출 하여 하나의 독립 된 폴 더routes에 넣 을 수 있다.세 개의 파일 은 각각publicRoutes.js,privateRoutes.js,adminRoutes.js이 라 고 명명 할 수 있다.

모든 경로 파일 에 대해 우 리 는 이런 경 로 를 배열 로 구성 한 다음 에export밖 에 나 가서 호출 할 수 있다.예 를 들 어publicRoutes.js:

import Login from '../pages';
import Home from '../pages/Home';

const publicRoutes = [
 {
 path: '/login',
 component: Login,
 exact: true,
 },
 {
 path: '/',
 component: Home,
 exact: true,
 },
];

export default publicRoutes;

그리고 우리 가 밖에서 사용 하 는 곳 은 바로 다음 과 같다.

import publicRoutes from './routes/publicRoutes';

function App() {
 return (
 <Router>
  <Switch>
  {publicRoutes.map(
   ({path, component, ...routes}) => 
   <Route key={path} path={path} component={component} {...routes}/>
  )}
  <Route path="/backend" component={Backend}/>
  <Route path="/admin" component={Admin}/>
  </Switch>
 </Router>
 );
}

이렇게 하면 우리App.js안 에는 지루 한 경로 목록 이 없 을 것 이 고 하나의 배열 만 순환 하면 된다.그러나 로그 인해 야 접근 할 수 있 는 페이지 와 관리자 페이지 에 대해 서 는 직접 렌 더 링Route구성 요 소 를 할 수 없습니다.우 리 는 고급 구성 요 소 를 다시 밀봉 하고 감 권 의 작업 을 이 구성 요소 에 넣 는 것 이 좋 습 니 다.그러면 우리 의 일반적인 페이지 가 실 현 될 때 어떻게 감 권 하 는 지 신경 쓸 필요 가 없습니다.
고급 구성 요소 패키지
이 인증 구성 요 소 를 패키지 하 는 것 도 간단 합 니 다.앞에서 우 리 는publicRoutes직접 순환 렌 더 링Route구성 요 소 를 가 져 왔 습 니 다.우리 의 인증 구성 요 소 는 이 를 바탕 으로 논리 만 추가 하면 됩 니 다.진정한Route구성 요 소 를 렌 더 링 하기 전에 현재 사용자 가 대응 하 는 권한 이 있 는 지 확인 하고 있 으 면 직접 렌 더 링Route구성 요 소 를 검사 합 니 다.없 으 면 한 페이지 로 돌아 갈 수 있 습 니 다.로그 인 페이지 나 백 스테이지 홈 페이지 일 수 있 습 니 다.구체 적 으로 자신의 프로젝트 수요 에 따라.그래서 우리 의 루트 설정 파일privateRoutes.js,adminRoutes.js안의 루트 는publicRoutes.js의 두 개의 인자 보다 많 습 니 다.

// privateRoutes.js
import Backend from '../pages/Backend';

const privateRoutes = [
 {
 path: '/backend',
 component: Backend,
 exact: true,
 role: 'user',  //            
 backUrl: '/login' //           
 },
];

export default privateRoutes;

adminRoutes.js비슷 한 표기 법 입 니 다.

// adminRoutes.js
import Admin from '../pages/Admin';

const adminRoutes = [
 {
 path: '/admin',
 component: Admin,
 exact: true,
 role: 'admin',  //       admin
 backUrl: '/backend' //            
 },
];

export default adminRoutes;

그 다음 에 우리 의 고급 구성 요 소 를 쓸 수 있 습 니 다.우 리 는 이 를AuthRoute라 고 명명 합 니 다.여기 서 가설 한 사용자 가 로그 인 할 때 백 엔 드 API 는 현재 사용자 의 역할 을 되 돌려 줍 니 다.한 사용자 가 여러 개의 역할 을 할 수 있 습 니 다.예 를 들 어 일반 사용자 의 역할 은['user']이 고 관리자 의 역할 은['user', 'admin']입 니 다.구체 적 인 권한 검증 논 리 는 자신의 프로젝트 권한 의 디자인 을 봐 야 합 니 다.여 기 는 하나의 예 일 뿐 입 니 다.

// AuthRoute.js
import React from 'react';
import { Route, Redirect } from 'react-router-dom';

function AuthRoute(props) {
 const {
 user: {
  role: userRole
 },
 role: routeRole,
 backUrl,
 ...otherProps
 } = props;

 //        ，        
 if (userRole && userRole.indexOf(routeRole) > -1) {
 return <Route {...otherProps} />
 } else {
 //       ，         
 return <Redirect to={backUrl} />
 }
}

export default AuthRoute;

그리고 우리AuthRoute의 렌 더 링adminRoutes과privateRoutes으로:

// ...        ...

{privateRoutes.map(
 (route) => <AuthRoute key={route.path} {...route}/>
)}
{adminRoutes.map(
 (route) => <AuthRoute key={route.path} {...route}/>
)}

로그 인 설정 권한
우리AuthRoute에user: { role }이라는 변 수 를 사 용 했 지만 우 리 는 아직 그것 을 설정 하지 않 았 다.실제 항목 에 서 는 로그 인 할 때 백 엔 드 API 가 현재 사용자 의 역할 을 되 돌려 주 고 전단 에 이 권한 정 보 를 일부 상태 관리 도구 에 저장 합 니 다.예 를 들 어Redux.이 권한 을 모 의 하려 면Login페이지 에 두 개의 단 추 를 쓰 십시오.사용자 의 설정 은 루트 구성 요소state로 관 리 됩 니 다.Login페이지 의 두 단 추 는 대응 하 는state단 추 를 바 꿉 니 다.

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

function Login(props) {
 const {loginAsUser, loginAsAdmin, history} = props;

 const userLoginHandler = () => {
 loginAsUser();  //             
 history.replace('/backend');  //          
 }

 const adminLoginHandler = () => {
 loginAsAdmin();  //              
 history.replace('/admin');  //           
 }

 return (
 <>
  <h1>   </h1>
  <button onClick={userLoginHandler}>      </button>
  <br/><br/>
  <button onClick={adminLoginHandler}>     </button>
  <br/><br/>
  <Link to="/">   </Link>
 </>
 );
}

export default Login;

여기까지 우리 의 이 간단 한 길 은 감 권 이 완성 되 었 고 구체 적 으로 달 리 는 효 과 는 다음 과 같다.

본 논문 의 모든 코드 가 GitHub 에 올 라 왔 으 니 여러분 은 내 려 서 놀 수 있 습 니 다.https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/React/react-router-usage
총결산

React-Router전단 의 경로 전환 을 관리 할 수 있 고React생태 에서 매우 중요 한 창고 이다.

React-Router브 라 우 저 와React-Native를 동시에 지원 하기 위해 세 개의 가방react-router핵심 가방,react-router-dom브 라 우 저 가방,react-router-native지원React-Native으로 나 누 었 다.사용 시 도입react-router이 필요 없 이 필요 한 플랫폼 패키지 만 도입 하면 된다.

서로 다른 권한 이 필요 한 경로 에 대해 우 리 는 그들 을 들 어 클래스 를 나 누 어 하나의 파일 을 만 들 수 있 습 니 다.경로 가 많 지 않 으 면 한 파일 에 두 고 여러 배열 을 내 보 내 도 됩 니 다.

인증 권 이 필요 한 경로 에 대해 우 리 는 고급 구성 요소 로 권한 검증 의 논 리 를 안에 밀봉 할 수 있 습 니 다.다른 페이지 는 설정 만 잘 하면 인증 권 문제 에 전혀 관심 을 가지 지 않 아 도 됩 니 다.

본 논문 의 내용 은 비교적 간단 하 다.익숙 한React-Router의 용법 으로 는 괜 찮 지만 우 리 는 사용 할 줄 만 알 고 그의 원 리 를 알 아야 한다.다음 글 은React-Router의 소스 코드 에 어떤 비밀 이 담 겨 있 는 지 살 펴 보 겠 습 니 다.길 을 잃 지 않 고 관심 을 가 져 보 세 요.하하~
참고 자료
공식 문서:https://reactrouter.com/web/guides/quick-start
GitHub 소스 주소:https://juejin.im/post/5e3ffc85518825494e2772fd
여기 서 React-Router 를 사용 하여 전단 로 감 권 을 실현 하 는 예제 코드 에 관 한 글 을 소개 합 니 다.더 많은 관련 React-Router 전단 로 감 권 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!