Auth/(re)Routing 用 API を使用した Angular+RESTful クライアント側通信

これは、いくつかの異なる質問といくつかの異なるチュートリアルでカバーされていますが、私が遭遇した以前のリソースはすべて、頭に釘を打つものではありません.

一言で言えば、私はする必要があります

• http://client.fooからへの POST 経由でログインhttp://api.foo/login
• logoutルートを提供するユーザーに「ログイン済み」の GUI/コンポーネント状態を持たせる
• ユーザーがログアウト/ログアウトしたときに UI を「更新」できるようにします。 これが一番イライラした
• ルートを保護して認証済み状態を確認し (必要な場合)、それに応じてユーザーをログイン ページにリダイレクトします。

私の問題は

• 別のページに移動するたびに、api.foo/statusユーザーがログインしているかどうかを判断するために呼び出しを行う必要があります (ルートに Express を使用している ATM)。ng-show="user.is_authenticated"
• ログイン/ログアウトに成功したら、ページを更新する必要があります (これを行う必要はありません) {{user.first_name}}。

私が試したこと

• http://witoldsz.github.io/angular-http-auth/ ¹
• http://www.frederiknakstad.com/authentication-in-single-page-applications-with-angular-js/ ²
• https://github.com/mgonto/restangular (私の人生では、 を使用する方法と使用しない方法を理解できませんでしたPOST。post dataドキュメントquery paramsはこの問題について何も明らかにしませんでした。

心が折れそうになる理由

• すべてのチュートリアルは何らかのデータベース (多くの Mongo、Couch、PHP+MySQL、無限) ソリューションに依存しているように見えますが、ログイン状態を維持するために RESTful API との通信だけに依存しているものはありません。ログインすると、追加の POST/GET が とともに送信されるwithCredentials:trueため、それは問題ではありません
• バックエンド言語を除いて、Angular + REST + Authを実行する例/チュートリアル/リポジトリが見つかりません。

自慢しすぎない

確かに、私は Angular の初心者であり、ばかげた方法でこれに取り組んでいても驚かないでしょう。誰かが別の方法を提案してくれたら嬉しいです。

私が ' を使用しているのは、Express主に私が本当に愛しJadeてStylusいるからです — 私はExpress' ルーティングと結婚しておらず、やりたいことが Angular のルーティングでのみ可能である場合はあきらめます。

誰でも提供できるヘルプを事前に感謝します。紫色のリンクが 26 ページほどあるので、Google で検索しないでください。;-)

¹このソリューションは Angular の $httpBackend モックに依存しており、実際のサーバーと通信する方法が不明です。

²これが最も近かったのですが、認証する必要のある既存の API があるため、passport の「localStrategy」を使用できず、私だけが使用するつもりだった OAUTH サービスを作成するのは非常識に思えました。

すべての API リクエストにカスタム ヘッダーを挿入しようとしています。ハードコードされたテキストを提供しているときは機能します。

作業コード

動作しないコード

エラー、注入しようとしたとき$route

キャッチされていないエラー: [$injector:cdep] 循環依存関係が見つかりました: $route <- $http http://errors.angularjs.org/1.2.3/ $injector/cdep?p0=%24route%20%3C-%20% 24http

AngularJS で Interceptor を作成しようとしています。私は AngularJS を初めて使用し、Interceptor の例をいくつか見つけましたが、動作させることができません。

ここに、関連するすべてのコードを含む app.js ファイルがあります。REST API を呼び出して JSONP を返すコントローラーもあります。

最初にモジュールを宣言してから構成します (Interceptor を定義します)。すべてのリクエストをキャッチし、コンソールに出力する必要があります...

app.factory で Interceptor を作成するのは間違っていますか?

angular $httpインターセプターを使用して、ajaxリクエストが401（認証されていない）を返すかどうかを確認します。応答が 401 の場合、元の要求がキューに入れられ、ログイン フォームが表示され、ログインに成功した後、キューに入れられた要求が再試行されます。これはすでに $http で機能しており、angular インターセプターのソースは次のとおりです。

このAngular $httpインターセプターを使用して簡単なリクエストを行うにはどうすればよいですか?

Breeze は、ファイル "Breeze/Adapters/breeze.ajax.angular.js" で angular $http サービスのラッパーを提供します。したがって、最初のアイデアは、風にそれを使用するように指示することでした:

angular.js をデバッグすると、breeze が実際に $http を使用していることがわかりますが、上記の登録されたインターセプターは実行されません。$http 内には、登録されたインターセプターを保持する配列 "reversedInterceptors" があります。この配列をコンソールに記録します。$http を使用すると、この配列の長さは (予想どおり) 1 ですが、breeze でリクエストを行うと、この配列は空になります。

問題は、この $http インターセプターを簡単なリクエストで使用するにはどうすればよいですか?

これは、そよ風によって提供された、breeze.ajax.angular.js のコードです。

http インターセプター ディレクティブを使用してスピナーをロードしています。スクリプト コードは次のとおりです。

そしてHTMLでは、必要なCSSでこのようにdivを呼び出しています

このスピナーを賢くしたいこと。小さな http 呼び出しごとにスピナーを表示したくありません。したがって、リクエストが非常に小さく、数ミリ秒かかる場合は、スピナーを表示したくありません。スピナーに遅延時間を追加したい.. 2秒としましょう。したがって、リクエストに2秒以上かかる場合、このスピナーが表示されるはずです。それ以外の場合は、表示したくありません。誰かがこれの解決策を見つけるのを手伝ってくれますか? https://github.com/ajoslin/angular-promise-trackerを試しましたが、うまくいかないようです。

誰かがそれをより賢くするのを手伝ってくれますか?

「requestCounter」を任意のコントローラーに追加して、リクエスト数で常に更新される値を取得できるようにしようとしています。インターセプター コードは機能していますが、requestCounter を挿入することによって提供される値は常に{count: 0}です。私は何を理解していません！

コントローラー

マークアップ

$httpProvider を次のように使用するインターセプターがあります (Angular doc から取得)

デバッガーを使用すると、このメソッドが各応答で呼び出されていることがわかります。「応答」オブジェクトの一時停止を見ると、以下に示すように、1 つのヘッダー、つまり Accept-Header のみが表示されます。

クロムで応答パケットを見ると、さらに多くのヘッダーが表示されます

私の質問は、応答のすべてのヘッダーを表示できないのはなぜですか?

具体的には、AntiforgeryToken の Cookie を読み取って保存したいのですが、どうすればよいですか?