Reactでの簡単な承認
ほとんどの実際のアプリには、認証と承認が必要です。 認証は一部のエンティティを有効なユーザーとして識別しますが、承認は、ユーザーの役割と権限に基づいて、ユーザーが実行できるアクションを定義します。
通常、承認を処理するための特別なモジュールやライブラリは必要ありません。ほとんどの場合、いくつかのユーティリティ関数で十分です。 アプリで認証または承認のために提供するソリューションはさまざまです。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));
Arrayプロトタイプのsome
およびincludes
メソッドを使用して、そのユーザーが指定された権限または役割の少なくとも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
評価に合格する。
まとめ
簡単な形式の承認を自分で行う方法を見てきました。 アプリケーションと要件に応じて、ソリューションは少し異なる場合がありますが、コアコンセプトは同じである必要があります。
この記事に見られる基本的な例については、このコードサンドボックスをチェックインできます。
涼しくしてください🦄