이 글은 주로 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} />
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} />
rrreee
들어가기 전에 이 방법으로 진행하기 전에 데이터가 먼저 로드됩니다. 위의 간단한 단계를 마치면 완전한 권한 제어 체인이 완성됩니다. 위 내용은 앞으로 모든 사람에게 도움이 되기를 바랍니다. 관련 기사:AngularJS에서 숫자 크기 추측 기능을 구현하는 방법
React의 제어되는 구성 요소와 제어되지 않는 구성 요소에 대한 자세한 소개
🎜위 내용은 React-Router에서 페이지 권한을 관리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!