React-Routerページ権限管理方法

前言
複雑なSAPアプリケーションでは、ユーザの役割に応じてユーザがページの権限を制御し、ユーザがシステムに入る前に権限の制御を行う必要があるかもしれない。本論文では、権限制御について議論する。本論文は読者がReactとReact-Routerの関連使用を知っていると仮定する。
伝統的な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>
 )
}

ここには全部で3ページのIndexPage、PhotoPage、InfoPageがあります。
最初のパーミッションを追加
私たちはユーザーがPhotoPageに入る前に、ユーザーに権限があるかどうかを検証し、storeの状態によって判断する必要があると仮定します。
先に次の関数を追加します。

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

関数では、stateのadminが1に等しいかどうかを判断しました。そうでないとトップページにジャンプします。
そしてRouteにon Enter={authRequired}属性を追加します。

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

以上を通じて、最初の権限の追加を完了しました。
システムに入る前に権限制御を行います。
システムに入る前に権限制御を行う必要があるなら、ポリシーを変更する必要があります。
例えば上記の例では、stateに加入したadminはロードされていませんので、上の階のrouteでデータをロードする必要があります。
最初にデータをロードする関数を追加します。

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());
 }

次にRouterを修正します。

<Router history={history}>
   <Route path="/" component={AppRoot} onEnter={loadData}>
    <IndexRoute component={IndexPage} />
    <Route path="photo" component={PhotoPage} onEnter={authRequired} />
    <Route path="info" component={InfoPage} />
   </Route>  
  </Router>

このように下に入る前にデータのロードを行います。
以上の簡単なステップを通じて、完全な権限コントロールチェーンが完成しました。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。