React-Router에서 페이지 권한을 관리하는 방법

이 글은 주로 React-Router가 페이지 권한을 관리하는 방법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 함께 살펴볼까요

서문

복잡한 SAP 애플리케이션에서는 사용자의 역할에 따라 사용자의 페이지 권한을 제어해야 하거나 심지어 사용자가 시스템에 들어가기 전에 권한을 제어해야 할 수도 있습니다. 이 문서에서는 이 권한 제어에 대해 설명합니다. 이 글은 독자들이 React와 React-Router의 관련 사용법을 이해하고 있다고 가정합니다.

기존 라우터로 시작

기존 경로는 아래와 같으며 권한 제한이 추가되지 않습니다.

export default (store) => {
 const history = syncHistoryWithStore(hashHistory, store);
 return (
  <Router history={history}>
   <Route path="/" component={AppRoot} >
    <IndexRoute component={IndexPage} />
    <Route path="photo" component={PhotoPage} />
    <Route path="info" component={InfoPage} />
   </Route>
   {/* <Redirect path="*" to="/error" /> */}
  </Router>
 )
}

여기에는 IndexPage, PhotoPage, InfoPage 3개의 페이지가 있습니다.

첫 번째 권한 추가

PhotoPage에 들어가기 전에 사용자에게 권한이 있는지 확인하고, 스토어 상태를 기준으로 판단해야 한다고 가정해 보겠습니다.

먼저 다음 함수를 추가하세요

const authRequired = (nextState, replace) => {
  // Now you can access the store object here.
  const state = store.getState();  
  if (state.admin != 1) {
   replace('/');
  }
 };

함수에서 상태 관리자가 1인지 확인하고, 그렇지 않으면 홈페이지로 이동합니다.

그런 다음 Route

<Route path="photo" component={PhotoPage} onEnter={authRequired} />

에 onEnter={authRequired} 속성을 추가합니다

function loadData(nextState, replace, callback) {
  let unsubscribe;
  function onStateChanged() {
   const state = store.getState();
   if (state.admin) {
    unsubscribe();
    callback();
   }
  }
  unsubscribe = store.subscribe(onStateChanged);
  store.dispatch(actions.queryAdmin());
 }

위를 통해 첫 번째 권한이 추가됩니다

시스템에 들어가기 전에 권한을 제어합니다

시스템에 들어가기 전에 권한을 제어해야 하는 경우 , 전략을 바꿔야 합니다.

예를 들어 위의 예에서는 상태에 추가된 admin이 로드되지 않았으므로 상위 레이어의 경로에 데이터를 로드해야 합니다

먼저 데이터를 로드하는 함수를 추가합니다

   
    
    <Route path="photo" component={PhotoPage} onEnter={authRequired} />
    
     
  

그 다음 Router를 수정합니다

rrreee

들어가기 전에 이 방법으로 진행하기 전에 데이터가 먼저 로드됩니다.

위의 간단한 단계를 마치면 완전한 권한 제어 체인이 완성됩니다.

위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

AngularJS에서 숫자 크기 추측 기능을 구현하는 방법

jQuery에서 이미지 보기 플러그인을 사용하는 방법

vue에서 페이징 구성 요소를 구현하는 방법

사용 간단한 키보드 조작을 구현하는 vue

React의 제어되는 구성 요소와 제어되지 않는 구성 요소에 대한 자세한 소개

🎜

위 내용은 React-Router에서 페이지 권한을 관리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!