（ui-）ルーターの角度アプリ、認証、および順序

Question

この質問はangular-appプロジェクトとユーザーを認証する方法を指します。

元の実装では、ルータのresolve句を使用していくつかのURLへのアクセスを保護しています。これは次のようになります。

$routeProvider.when('/projects', { 
templateUrl:'projects/projects-list.tpl.html', 
controller:'ProjectsViewCtrl', 
resolve:{ 
    projects:['Projects', function (Projects) { 
    //TODO: fetch only for the current user 
    return Projects.all(); 
    }], 
    authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser 
} 

}）;

ユーザーが認証されてプロジェクトが取得される（UIのちらつ​​きを防ぐ）まで、ビューはレンダリングされません。ユーザーが認証されていない場合、ログインポップアップがポップアップし、ユーザーがそれを送信すると、約束が解決され、要求されたページが表示されます。これはProjects.all（）呼び出しでauthが必要ない場合に便利です。

はここでサーバー呼び出しのログです：

127.0.0.1 - - [Mon, 28 Oct 2013 11:15:47 GMT] "GET /projects HTTP/1.1" 200 739 "-" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0" 
Unauthenticated 
127.0.0.1 - - [Mon, 28 Oct 2013 11:15:47 GMT] "GET /current-user HTTP/1.1" 200 24 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0" 
Unauthenticated 
Unauthenticated 
127.0.0.1 - - [Mon, 28 Oct 2013 11:15:47 GMT] "GET /current-user HTTP/1.1" 200 24 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0" 
127.0.0.1 - - [Mon, 28 Oct 2013 11:15:47 GMT] "GET /databases/angular_app/collections/projects?q=%7B%7D HTTP/1.1" 200 10 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0" 
Unauthenticated 
127.0.0.1 - - [Mon, 28 Oct 2013 11:15:59 GMT] "POST /login HTTP/1.1" 200 161 "http://localhost:3000/projects" "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:24.0) Gecko/20100101 Firefox/24.0" 

angular_app /コレクション/プロジェクトへの呼び出しにも認証されていないユーザーのために有効です。 API呼び出しが認証されなければならないことを（私はUI-ルータとRestangularを使用する以外）

$stateProvider 
    .state('root.tickets', { 
     url: '/tickets', 
     views: { 
      'container@': { 
       templateUrl: 'tickets/tickets-list.tpl.html', 
       controller:'TicketsViewCtrl', 
       resolve:{ 
        ticketsy: ['Restangular', function (Restangular) { 
        //Call to tickets must be authenticated 
        return Restangular.all('tickets').getList(); 
        }], 
        authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser 
       } 
      } 
     } 

差がある：私の場合は

は、私は、次のコードを持っています。サーバーログは次のようになります。

[28/Oct/2013 05:50:15] "GET /api/tickets/ HTTP/1.1" 403 59 
[28/Oct/2013 05:50:15] "GET/HTTP/1.1" 200 963 
[28/Oct/2013 05:50:16] "GET /api/current-user/ HTTP/1.1" 200 14 
[28/Oct/2013 05:50:16] "GET /api/tickets HTTP/1.1" 301 0 
[28/Oct/2013 05:50:16] "GET /api/tickets/ HTTP/1.1" 403 59 
[28/Oct/2013 05:50:22] "POST /api/login/ HTTP/1.1" 200 120 

メモ403ステータスコードはここにあります。その結果、ログインポップアップが表示され、認証された後に空のページが表示されます。私は、これがデータの約束を破ることが原因だと考えています。

私の質問です - 何とか約束の命令を強制することは可能ですか？私はまず、ユーザーが認証されているかどうかを確認してから、バックエンドなどへの呼び出しを発行したいと思います。他の解決策がありますか？私はAngularを学んでいます。単純な解決策があるとしても、私には分かりません。

Answer 1

私はリゾルバパターンを使用するのが大好きですが、角度ルータでこれらのタイプを実行することは非常に難しいと感じています。

一つの解決策は次のように保護したいAPI呼び出しリゾルバにauthenticatedUserリゾルバの結果を注入依存性である：

$stateProvider 
    .state('root.tickets', { 
     url: '/tickets', 
     views: { 
      'container@': { 
       templateUrl: 'tickets/tickets-list.tpl.html', 
       controller:'TicketsViewCtrl', 
       resolve:{ 
        authenticatedUser: securityAuthorizationProvider.requireAuthenticatedUser, 
        ticketsy: function (Restangular, authenticatedUser) { 
        //Call to tickets must be authenticated 
        return Restangular.all('tickets').getList(); 
        } 
       } 
      } 
     } 

リゾルバは、チェーン（authenticatedUser - > ticketsy）で実行されます。この方法はなく、一度に非同期

私はこれが役に立ったと思っています。それを行うより良い方法があればいいと思います。なぜスタックオーバーフローで検索していますか？

Answer 2

あなたはこれを試しましたか？

基本的に

return securityAuthorizationProvider.requireAuthenticatedUser().then(function() { 
    return Restangular.all('tickets').getList(); 
}); 

requireAuthenticatedUserあなたはRestangularコールを呼び出して、それをチェーンことができるように約束を返します。