[javascript] react-router에서 경로에 대한 액세스를 제한하는 방법은 무엇입니까?

업데이트 (2019 년 8 월 16 일)

react-router v4에서 React Hooks를 사용하면 약간 다르게 보입니다. 의 당신의 시작하자 App.js.

export default function App() {
  const [isAuthenticated, userHasAuthenticated] = useState(false);

  useEffect(() => {
    onLoad();
  }, []);

  async function onLoad() {
    try {
      await Auth.currentSession();
      userHasAuthenticated(true);
    } catch (e) {
      alert(e);
    }
  }

  return (
    <div className="App container">
      <h1>Welcome to my app</h1>
      <Switch>
        <UnauthenticatedRoute
          path="/login"
          component={Login}
          appProps={{ isAuthenticated }}
        />
        <AuthenticatedRoute
          path="/todos"
          component={Todos}
          appProps={{ isAuthenticated }}
        />
        <Route component={NotFound} />
      </Switch>
    </div>
  );
}

Auth사용자가 현재 인증되었는지 확인하기 위해 라이브러리를 사용하고 있습니다. 이것을 인증 확인 기능으로 대체하십시오. 그렇다면 isAuthenticated플래그를로 설정합니다 true. 앱이 처음로드 될 때이 작업을 수행합니다. 또한 언급 할 가치가있는 것은 인증 확인이 실행되는 동안 앱에로드 기호를 추가 할 수 있으므로 페이지를 새로 고칠 때마다 로그인 페이지를 플래시하지 않습니다.

그런 다음 깃발을 경로에 전달합니다. 두 가지 유형의 경로 AuthenticatedRoute및 UnauthenticatedRoute.

AuthenticatedRoute.js모습이 맘에.

export default function AuthenticatedRoute({ component: C, appProps, ...rest }) {
  return (
    <Route
      {...rest}
      render={props =>
        appProps.isAuthenticated
          ? <C {...props} {...appProps} />
          : <Redirect
              to={`/login?redirect=${props.location.pathname}${props.location.search}`}
            />}
    />
  );
}

가로 isAuthenticated설정되어 있는지 확인합니다 true. 그렇다면 원하는 구성 요소를 렌더링합니다. 그렇지 않은 경우 로그인 페이지로 리디렉션됩니다.

UnauthenticatedRoute.js다른 한편으로는 다음과 같습니다.

export default ({ component: C, appProps, ...rest }) =>
  <Route
    {...rest}
    render={props =>
      !appProps.isAuthenticated
        ? <C {...props} {...appProps} />
        : <Redirect to="/" />}
  />;

이 경우 isAuthenticated가로 설정되어 있으면 false원하는 구성 요소를 렌더링합니다. true로 설정하면 홈페이지로 이동합니다.

자세한 버전은 당사 가이드 ( https://serverless-stack.com/chapters/create-a-route-that-redirects.html) 에서 찾을 수 있습니다 .

이전 버전

허용되는 답변은 맞지만 Mixins는 React 팀에 의해 유해한 것으로 간주됩니다 ( https://facebook.github.io/react/blog/2016/07/13/mixins-considered-harmful.html ).

누군가이 질문을 발견하고 권장되는 방법을 찾고 있다면 Mixins 대신 Higher Order Components를 사용하는 것이 좋습니다.

다음은 계속하기 전에 사용자가 로그인했는지 확인하는 HOC의 예입니다. 사용자가 로그인하지 않은 경우 로그인 페이지로 리디렉션됩니다. 이 구성 요소 isLoggedIn는 기본적으로 사용자가 로그인했는지 여부를 나타 내기 위해 응용 프로그램에서 저장할 수있는 플래그 인 라는 prop을받습니다 .

import React from 'react';
import { withRouter } from 'react-router';

export default function requireAuth(Component) {

  class AuthenticatedComponent extends React.Component {

    componentWillMount() {
      this.checkAuth();
    }

    checkAuth() {
      if ( ! this.props.isLoggedIn) {
        const location = this.props.location;
        const redirect = location.pathname + location.search;

        this.props.router.push(`/login?redirect=${redirect}`);
      }
    }

    render() {
      return this.props.isLoggedIn
        ? <Component { ...this.props } />
        : null;
    }

  }

  return withRouter(AuthenticatedComponent);
}

그리고이 HOC를 사용하려면 경로를 감싸십시오. 귀하의 예의 경우 다음과 같습니다.

<Route handler={requireAuth(Todos)} name="todos"/>

여기에있는 자세한 단계별 자습서 ( https://serverless-stack.com/chapters/create-a-hoc-that-checks-auth.html) 에서이 항목과 몇 가지 다른 주제를 다룹니다.