JavaScriptでユーザー権限を処理します

堅牢なWebアプリケーションの開発には、多くの場合、ユーザー許可の管理が含まれます。この記事では、選択したフレームワーク（React、Vue、またはPlain JavaScript）に関係なく、フロントエンドでユーザー許可を処理するためのクリーンで効率的な方法を示しています。 Restful APIバックエンドを想定しますが、パターンは他のアーキテクチャに適応します。

Admin（Full Access）、Editor（Create、View、Edit）、Guest（表示のみ）などのロールを備えたドキュメントマネージャーアプリケーションを考えてみましょう。バックエンドはユーザーの役割情報を提供する必要があります。この例では、API応答にはaccessLevelプロパティが含まれる場合があります。

 {
  ID：1、
  タイトル：「私の最初のドキュメント」、
  Authorid：742、
  アクセスレベル：「管理者」、
  コンテンツ： {...}
}

重要なことに、フロントエンドは権限の唯一の仲裁人であってはなりません。不正アクセスを防ぐには、バックエンドの検証が不可欠です。

定数の確立

明確さと保守性のために、別のファイル（ constants.jsなど）でアクションと役割の定数を定義します。

 const Action = {
  modify_file： "modify_file"、
  view_file： "View_file"、
  delete_file： "delete_file"、
  create_file： "create_file"
};

constロール= {
  管理者：「管理者」、
  編集者：「編集者」、
  ゲスト：「ゲスト」
};

Export {アクション、役割};

TypeScript Enumsを使用すると、タイプの安全性が向上します。これらの定数は次のとおりです。

• 真実の単一の源：すべてのアクションと役割を簡単に表示できます。
• タイプ安全：タイプミスを防ぎ、コードの読みやすさを向上させます。
• 改善されたドキュメント：チームメンバーの理解を簡素化します。

許可マッピングの定義

アクションを役割にマッピングするファイル（たとえば、 permissions.js ）を作成します。

 "./constants.js"から{アクション、役割、役割}をインポートします。

const mappings = new Map（）;

mappings.set（Action.Modify_file、[choles.admin、choles.editor]）;
mappings.set（Actions.View_File、[choles.admin、choles.editor、choles.guest]）;
mappings.set（action.delete_file、[choles.admin]）;
mappings.set（action.create_file、[choles.admin、choles.editor]）;

デフォルトマッピングのエクスポート。

このMap次のとおりです。

• 集中管理：許可を簡単に変更できます。
• テスト可能性：スナップショットテストでのテストが簡単です。
• 読みやすさ：アクセス許可の概要を明確にします。

UIで許可チェックを実装します

ドロップダウンメニューをレンダリングするReactコンポーネントがあるとしましょう。

 "./permissions.js"からのImport haspermission;
"./constants.js"から{アクション}をインポートします。

関数ドロップダウン（{ファイル}）{
  戻る （
    

{haspermission（file、action.view_file）&&
• リフレッシュします
} {haspermission（file、action.modify_file）&&
• 名前を変更します
} {haspermission（file、action.create_file）&&
• 重複
} {haspermission（file、action.delete_file）&&
• 消去
}

）; }

これは、 hasPermissionヘルパー関数（以下で説明）を使用して、ユーザー権限に基づいてメニュー項目を条件付きにレンダリングします。

hasPermission関数

この関数は、ユーザーが必要な許可を持っているかどうかをチェックします。

 "./permissions.js"からマッピングをインポートします。

function haspermission（file、action）{
  if（！file？.AccessLevel）falseを返します。
  return mapping.has（action）&& mappings.get（action）.includes（file.accesslevel）;
}

デフォルトのエクスポートhaspermission;

これにより、指定されたアクションのmappingsと、ユーザーのaccessLevelが含まれているかどうかが簡潔にチェックされます。

パターンを拡張します

このパターンは、より複雑なシナリオにスケーリングします。たとえば、ライセンスチェックの追加：

 // ...（ライセンスの定数）...

const licensemappings = new Map（）;
// ...（ライセンスへのアクションをマップ）...

function haslicense（user、action）{
  // ...（ライセンスを確認するロジック）...
}

function hasAccess（file、user、action）{
  return haspermission（file、action）&& haslicense（user、action）;
}

または異なるファイルタイプの処理：

 const typemappings = new Map（）;
// ...（ファイルタイプとライセンスへのアクションをマップ）...

function hastypepermission（file、user、action）{
  // ...（ファイルタイプの権限を確認するロジック）...
}

これにより、アクセス許可に対する粒状制御が可能になります。テストは、マッピングのスナップショットテストや許可機能のための単体テストなど、包括的でなければなりません。 Reactとテストを使用した完全な例は、 codeSandboxで利用できます。バックエンドの検証は非常に重要なままであることを忘れないでください。

以上がJavaScriptでユーザー権限を処理しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。