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 に等しいかどうかを判断し、そうでない場合はホームページにジャンプします。

次に、onEnter={authRequired} 属性を Route に追加します

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

上記により、最初の権限が追加されます

システムに入る前に権限を制御します

システムに入る前に権限を制御する必要がある場合は、戦略を変更する必要があります。

例えば上記の例では、ステートに追加したadminはロードされていないので、上位層のルートにデータをロードする必要があります

まずデータをロードする関数を追加します

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を修正します

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

入る前にこのように先に進む前に、最初にデータがロードされます。

上記の簡単な手順を完了すると、完全な権限制御チェーンが完成します。

以上が、今後皆さんのお役に立てば幸いです。

関連記事:

AngularJSで数値サイズ推測機能を実装する方法

jQueryで画像表示プラグインを使用する方法

vueでページングコンポーネントを実装する方法

使い方簡単なキーボード操作を実装する vue

React の制御コンポーネントと非制御コンポーネントの詳細な紹介

以上がReact-Router でページ権限を管理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。