ほとんどの実際のアプリには、認証と承認が必要です。 認証は一部のエンティティを有効なユーザーとして識別しますが、承認は、ユーザーの役割と権限に基づいて、ユーザーが実行できるアクションを定義します。

通常、承認を処理するための特別なモジュールやライブラリは必要ありません。ほとんどの場合、いくつかのユーティリティ関数で十分です。 アプリで認証または承認のために提供するソリューションはさまざまです。Reduxでユーザー状態管理を維持することを決定したり、専用モジュールを構築したりすることもできます。

Reactで単純なロールベースの承認を処理する方法を見てみましょう。

以下はクライアント側の承認用であり、簡単にバイパスできることに注意してください。 クライアント側での承認は、セキュリティよりもUXと関係があります。 バックエンドでロールが保護されていることを確認する必要があります。

簡単な承認

私たちが持っていると言う user オブジェクト。通常、次のようなエンドポイントを呼び出すことによって取得されます。 /me 認証後、次の構造で:

const user = {
  name: 'Jackator',
  // ...
  roles: ['user'],
  rights: ['can_view_articles']
};

ユーザーには、ロールにグループ化できるいくつかの権限があります。 アプリの場合、必要なのは役割のみ、権限のみ、またはその両方であり、問題ではありません。 REST APIは、ロール内にネストされた権限を提供する場合があります。どちらも重要ではありません。ソリューションをニーズに適合させるために、それを念頭に置いてください。 重要なのは、ユーザーがいることです。

次に、ユーザー認証を確認するために使用できるいくつかのユーティリティ関数を使用して、auth.jsファイルを作成できます。

auth.js
export const isAuthenticated = user => !!user;

export const isAllowed = (user, rights) =>
  rights.some(right => user.rights.includes(right));

export const hasRole = (user, roles) =>
  roles.some(role => user.roles.includes(role));

を使用して someincludes Arrayプロトタイプのメソッドでは、そのユーザーが指定された権限または役割の少なくとも1つを持っているかどうかを確認しています。 基本的な権限チェックを実行するには、これで十分です。

以来 user どこにでも保存できます。たとえば、Reduxでは、パラメーターとして関数に渡すことができます。

最後に、さまざまなUIを条件付きで表示するために、auth.jsで定義された関数を使用する基本的なReactコンポーネントを作成しましょう。

App.js
import React from 'react';
import { render } from "react-dom";
import { hasRole, isAllowed } from './auth';

const user = {
  roles: ['user'],
  rights: ['can_view_articles']
};

const admin = {
  roles: ['user', 'admin'],
  rights: ['can_view_articles', 'can_view_users']
};

const App = ({ user }) => (
  <div>
    {hasRole(user, ['user']) && <p>Is User</p>}
    {hasRole(user, ['admin']) && <p>Is Admin</p>}
    {isAllowed(user, ['can_view_articles']) && <p>Can view Articles</p>}
    {isAllowed(user, ['can_view_users']) && <p>Can view Users</p>}
  </div>
);

render(
  <App user={user} />,
  document.getElementById('root')
);

論理を使用して短絡評価を行っています && オペレーター。 そのようにして、 hasRole また isAllowed 関数は戻ります true 以下のコンテンツがレンダリングされます。

ユーザーをadminに変更してみると、admin関連のUIが表示されます。

条件付きルート

このソリューションでは、 React Router を使用している場合、同じ方法を使用して条件付きでルートをレンダリングできます。

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const App = ({ user }) => (
  <BrowserRouter>
    <Switch>
      {hasRole(user, ['user']) && <Route path='/user' component={User} />}
      {hasRole(user, ['admin']) && <Route path='/admin' component={Admin} />}
      <Route exact path='/' component={Home} />
    </Switch>
  </BrowserRouter>
);

React Routerを使用すると、ルートの宣言と作成が簡単になります。 Route コンポーネント、およびそれを利用することができます:ルートは、次の場合にのみルーターによって追加および処理されます <Route> コンポーネントは、 hasRole 評価。

まとめ

簡単な形式の承認を自分で行う方法を見てきました。 アプリケーションと要件に応じて、ソリューションは少し異なる場合がありますが、コアコンセプトは同じである必要があります。

この記事に見られる基本的な例については、このコードサンドボックスをチェックインできます。

涼しくしてください🦄