Reactでの簡単な承認
ほとんどの実際のアプリには、認証と承認が必要です。 認証は一部のエンティティを有効なユーザーとして識別しますが、承認は、ユーザーの役割と権限に基づいて、ユーザーが実行できるアクションを定義します。
通常、承認を処理するための特別なモジュールやライブラリは必要ありません。ほとんどの場合、いくつかのユーティリティ関数で十分です。 アプリで認証または承認のために提供するソリューションはさまざまです。Reduxでユーザー状態管理を維持することを決定したり、専用モジュールを構築したりすることもできます。
Reactで単純なロールベースの承認を処理する方法を見てみましょう。
以下はクライアント側の承認用であり、簡単にバイパスできることに注意してください。 クライアント側での承認は、セキュリティよりもUXと関係があります。 バックエンドでロールが保護されていることを確認する必要があります。
簡単な承認
私たちが持っていると言う user
オブジェクト。通常、次のようなエンドポイントを呼び出すことによって取得されます。 /me
認証後、次の構造で:
const user = {
name: 'Jackator',
// ...
roles: ['user'],
rights: ['can_view_articles']
};
ユーザーには、ロールにグループ化できるいくつかの権限があります。 アプリの場合、必要なのは役割のみ、権限のみ、またはその両方であり、問題ではありません。 REST APIは、ロール内にネストされた権限を提供する場合があります。どちらも重要ではありません。ソリューションをニーズに適合させるために、それを念頭に置いてください。 重要なのは、ユーザーがいることです。
次に、ユーザー認証を確認するために使用できるいくつかのユーティリティ関数を使用して、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));
を使用して some
と includes
Arrayプロトタイプのメソッドでは、そのユーザーが指定された権限または役割の少なくとも1つを持っているかどうかを確認しています。 基本的な権限チェックを実行するには、これで十分です。
以来 user
どこにでも保存できます。たとえば、Reduxでは、パラメーターとして関数に渡すことができます。
最後に、さまざまなUIを条件付きで表示するために、auth.jsで定義された関数を使用する基本的なReactコンポーネントを作成しましょう。
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
評価。
まとめ
簡単な形式の承認を自分で行う方法を見てきました。 アプリケーションと要件に応じて、ソリューションは少し異なる場合がありますが、コアコンセプトは同じである必要があります。
この記事に見られる基本的な例については、このコードサンドボックスをチェックインできます。
涼しくしてください🦄