React 애플리케이션에서 보호 라우팅 설정 방법

일반적으로 웹 응용 프로그램을 구축할 때, 일부 루트는 신분 검증과 관련이 있을 수 있다.사용자가 특정 페이지에 접근하는 것을 제한하거나, 프로그램 전체가 로그인을 지원하기를 원합니다.
React Router 루트는 좋은 선택이지만 아무도 방문하지 않도록 보호할 방법이 없습니다.다행히도 이 문제를 해결하는 방법은 매우 간단명료하다.
이 강좌에서 저는 이 문제에 대한 해결 방안과 제가 어떻게 해결했는지 보여드리고 싶습니다.나는 create react 프로그램을 사용해서 처음부터 절대적으로 필요한 내용만 포함할 것이다. 그러면 따라갈 수 있다.더 이상 말할 필요 없이 인코딩을 시작합시다.

모든 것을 안배하다

내가 create-react-app로 프로젝트를 안내한 후에 나는 react-router-dom 를 설치하여 루트에 사용했다.이 프로젝트는 다른 의존항이 필요 없다.초기 파일create-react-app은 수정 사항이 많지 않습니다. 이것은 package.json 파일의 현재 상태입니다.

{
  "name": "auth",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
+   "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

색인 파일 수정

전송 요청을 처리하는 사용자 정의 구성 요소를 만들어서 보호할 것입니다.우리는 일반적인 낡은 Route 부품이 있다.이것은 우리의 유일한 공공 노선인 로그인 페이지에 사용할 것입니다.우리는 또한 사용자 정의 구성 요소와 개인 노선을 처리하기를 희망한다.우리는 그것을 ProtectedRoute라고 부른다.
이 구성 요소의 용도는 매우 간단할 것이다.사용자가 인증을 통과했다면 전달된 구성 요소를 보여 줍니다.그렇지 않으면 로그인 페이지로 다시 지정합니다.

import React from 'react';
import ReactDOM from 'react-dom';
+ import { Route, BrowserRouter, Switch } from 'react-router-dom';
import './index.css';
+ import Login from './Login';
+ import Dashboard from './Dashboard';
+ import Settings from './Settings';
+ import ProtectedRoute from './ProtectedRoute';
import * as serviceWorker from './serviceWorker';

+ ReactDOM.render((
+     <BrowserRouter>
+         <Switch>
+             <Route path="/login" component={Login} />
+             <ProtectedRoute exact={true} path="/" component={Dashboard} />
+             <ProtectedRoute path="/settings" component={Settings} />
+             <ProtectedRoute component={Dashboard} />
+         </Switch>
+     </BrowserRouter>
+ ), document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

보시다시피 저는 Route에서 BrowserRoute, Switch와 react-router-dom를 가져왔습니다.공유기를 테스트할 수 있도록 구성 요소도 만들었습니다.ProtectedRoute:

얘는 component 아이템이 필요해. 보여줄 아이템

어떤 URL에 어떤 구성 요소가 표시되는지 알기 위한 경로가 필요합니다

여기에서 나는 Dashboard 구성 요소를 두 번 정의했다.경로를 정의하지 않으면 계기판에 착륙하기를 원하기 때문이다.이것은 무슨 선입니까? 15개의 손잡이입니다.사용자가 잘못된 URL을 입력한 경우 대시보드에 로드할 수도 있습니다.17번째 행의 path 속성을 생략하여 React Router에서 제공된 구성 요소로 폴백하도록 안내합니다.ProtectedRoute 구성 요소가 내부에서 어떻게 작동하는지 봅시다.

보호된 라우팅 작성

그러면 우리가 가져온 사용자 정의 구성 요소 중 무엇이 있습니까?간단합니다. 렌더링 기능은 다음과 같습니다.

import React from 'react'
import { Redirect } from 'react-router-dom'

class ProtectedRoute extends React.Component {

    render() {
        const Component = this.props.component;
        const isAuthenticated = ???;

        return isAuthenticated ? (
            <Component />
        ) : (
            <Redirect to={{ pathname: '/login' }} />
        );
    }
}

export default ProtectedRoute;

우리는 도구에서 구성 요소를 가져와 사용자가 인증을 거친 후에 돌아옵니다.나는 Redirect에서 온 react-router-dom도 사용했다.만약 isAuthenticated 결과가 가짜라면, 우리는 사용자를 로그인 페이지로 다시 지정할 것입니다.
그렇다면 우리는 실제로 사용자가 신분 검증을 거쳤는지 아닌지를 어떻게 확정합니까?우리는 isAuthenticated에게 분배해야 한다. 뭐라고?

인증 사용자

마지막 단계는 사용자에 대한 신분 검증이다.이것은 여러 가지 방식으로 실현할 수 있지만, 실현에 대한 선택은 다를 수 있습니다.우리는 cookies, 또는 localStorage, 또는 둘의 조합, 또는 다른 것을 사용할 수 있다.어떤 방식으로든지, 우리는 클라이언트에 사용자가 언제 로그인하는지 알 수 있도록 사용자에 대한 정보를 저장하기를 희망합니다.

render() {
    const Component = this.props.component;
    const isAuthenticated = localStorage.getItem('token');

    return isAuthenticated ? (
        <Component />
    ) : (
        <Redirect to={{ pathname: '/login' }} />
    );
}

위조를 방지하기 위해서, 이 정보는 서버에서 검증하고자 하는 영패의 존재나 존재를 원할 수도 있습니다.이렇게 하면 사용자가 token 키의 존재만으로 로그인할 수 없도록 확보할 수 있습니다.그것은 진정으로 중요한 것이 가치를 확보했다.

위gif에서 보듯이, 페이지를 새로 고치면 로그인 화면으로 가져옵니다.만약 내가 제한된 다른 루트에 접근하려고 한다면, 나는 로그인 페이지로 다시 돌아갈 것이다.현재 값이 얼마든지 상관없이 영패를 설정하면 이 페이지를 방문할 수 있습니다.로그인할 때 존재하지 않는 경로에 접근하려고 하면 계기판에 착륙할 것입니다.일단 내가 저장 공간을 비우면, 나는 접근 권한을 잃게 된다.

요약

총괄적으로 말하자면 React 코드 라이브러리는 모호해지지만 클라이언트 응용 프로그램의 작업 방식은 역공정을 할 수 있다.이것이 바로 인증이나 권한 수여와 관련된 모든 내용을 서버 측에서 백업해야 하는 이유입니다.
시간을 들여 통독해 주셔서 감사합니다. 아래의 평론에서 저에게 이런 방법에 대한 당신의 견해를 알려주십시오.당신의 안전 해결 방안은 무엇입니까?🔒