AngularJSで承認を実装する

Question

AngularJSで承認を実装したいと思います。ある種のソーシャルメディアである私のプロジェクトでは、異なるロールや同じロールでもビューファイルが異なって見えることがあります。

たとえば、顧客と会社の2つの役割があるとします。

共有ビューファイルでは、顧客と会社が異なることがある可能性があります。 （異なる役割）。

お客様は、ページ内にボタンが表示されている可能性があります。 （同じ役割）

私は、ロールを確認するだけで認証を実装することはできません。状況によっては、サーバーと通信する必要があることもあります。

は、私は複数の選択肢があります。

• は、彼らが偽のデフォルト値を持って対応する権限を持つ私のコントローラのスコープ内の変数を作成します。

  $scope.auth = { canRate: false, isConnected: false };

  はその後、サーバーとの変化への接続します応答に基づくauthオブジェクトの値また、ビューファイルにng-ifを使用して、要素を表示または非表示にします。

• ディレクティブを作成し、カンマ区切りのパーミッションを渡します。

  <button auth="canRate,isConnected"></button>

  その後、権限を確認するためにサーバーに接続します。それらのすべてが真の場合は、要素を表示します。

• を使用し、ルーティング時にサーバーから必要なすべてのデータを取得すると、各ページの読み込み時間が長くなります。

私はこの問題を解決するより良いアプローチがあることを知りたいですか？ どんな種類のヘルプやコメントをいただければ幸いです。

注：もちろん、サーバー側の認証と承認があります。私は説明したユーザーの役割やその他の条件に基づいて、ビューファイルにいくつかの要素を表示したいだけです。また、この要素はボタンやリンクのようなものです。共有ビューと要素を隠す代わりに、状況ごとに異なるビューを使用できます。

どのように私はこのアプローチが表示目的のみであり、セキュリティの課題を解決できないことを知っています。

注：をご覧ください。this repositoryをご覧ください。

Answer 1

最初のものは、I LOVE AngularJSです。しかし、すべてのWebクライアントのフレームワークと同様、厳密にAngularJSではAuthorizationを実装することはできません。誰もが投票ボタンに達する前に、私に説明をさせてください：

ユーザーからデータを隠すことはできません。サーバーがクライアントにデータを送信する場合、表示するのを避けるためにng-hideを使用しても、（例えば、フィドラーを使用して）それを見る方法を見つけることができます。

したがって、サーバー側で承認を実装する必要があります。今度は、あなたがそれをすると仮定します：

AngularJSは、サーバーから受け取ったデータに基づいて動的なWebインターフェイスを構築するのに最適です。したがって、あなたのサーバはクライアントが見ることができるデータだけを送るべきです。次に、ng-hideまたはng-ifを使用して、データを表示しないコンポーネントを表示しないようにすることができます。

さらに、サーバーは利用可能なアクションのリストを含むオブジェクトをユーザーに送信することもできます。そして、アクションが利用できないときにそれらを表示しないようにあなたのボタンでng-hideを使うことができます。

でも、ユーザーが実行できない操作を無視するようにサーバー側をコーディングする必要があります。

Answer 2

あなたのアプローチはうまくいくが、安全ではありません。私は、サーバーが認証も処理することを確認します。個人的には、私はAngularJSで作業するときに、常にサーバー側のトークンベースの認証システムを使用してきました。

ng-ifを使用する代わりに、ログイン時に与えられたトークンをGETリクエストまたはPOSTリクエストで要求する必要があります。そこからサーバーは、ユーザーが資格情報を偽造することなく、要求の成功を許可するかどうかを判断できます。どちらの例も正常に動作しますが、表示目的でのみ隠す手段として使用します。 Webクライアントは機密情報を安全に保ちませんし、不要なユーザーからのPOSTリクエストの可能性を防ぐこともありません。