17

私はAngularを初めて使用します。現在、すべてのルートを設定して、希望どおりに機能させようとしています。

セットアップ: ユーザーが特定のページ(/settingsこの例の場合)に移動すると、アプリはユーザーが既にログインしているかどうかを確認する必要があります。ログインしている場合は、通常どおり続行します。それ以外の場合、ユーザーはログインページ(/login)に移動する必要があります。

欲しいもの: ユーザーが正常にログインした後、最初にアクセスしようとしていたページに移動する必要があります(/settings

私の質問: ユーザーがどこに行こうとしていたかを覚える「角度のある方法」はありますか?

関連コード:

app.js

  .when('/settings', {
      templateUrl: '/views/auth/settings.html',
      controller: 'SettingsCtrl',
      resolve: {
        currentUser: function($q, $location, Auth) {
          var deferred = $q.defer();

          var noUser = function() {
            //remember where the user was trying to go
            $location.path("/login")
          };

          Auth.checkLogin(function() {
            if (Auth.currentUser()) {
              deferred.resolve(Auth.currentUser());
            } else {
              deferred.reject(noUser());
            }
          });

          return deferred.promise;
        }
      }
    })

login.js

  $scope.submit = function() {
    if(!$scope.logInForm.$invalid) {
      Auth.login($scope.login, $scope.password, $scope.remember_me)
      //go to the page the user was trying to get to
    }
  };

これまで私を導いてくれたビデオを提供してくれたJohnLindquistに感謝します。

4

1 に答える 1

17

まず、ユーザーをログインページにリダイレクトしたくありません。

シングルページWebアプリの理想的なフローは次のとおりです。

  1. ユーザーがWebサイトにアクセスします。Webサイトは、特定のルート(/ profile / editなど)でAngularアプリの静的アセットを返信します。

  2. コントローラ(指定されたルート)は、$ http、$ route、またはその他のメカニズムを使用してAPIを呼び出します(たとえば、GETを介して/ api / v1にログインしたユーザーのアカウントから、プロファイルの編集フォームに詳細を事前に入力します) / users / profile)

  3. クライアントがAPIから401を受信した場合、ログインするモーダルを表示し、API呼び出しを再生します。

  4. API呼び出しは成功します(この場合、ユーザーは自分のアカウント用に事前に入力されたプロファイルの編集フォームを表示できます)。

どうすれば#3ができますか?答えは$ httpResponseInterceptorsです。

グローバルエラー処理、認証、または受信した応答の同期または非同期の前処理の目的で、http要求の応答を、これらの要求を開始したアプリケーションコードに渡す前にインターセプトできることが望ましいです。応答インターセプターは、promise APIを活用して、同期と非同期の両方の前処理に対するこのニーズを満たします。

http://docs.angularjs.org/api/ng.$http

理想的なユーザーエクスペリエンスがどうあるべきかがわかったので、どうすればよいでしょうか。

ここに例があります: http ://witoldsz.github.com/angular-http-auth/

この例は、次の記事に基づいています。

http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

幸運と幸せなAngularing!

于 2013-03-07T01:42:10.720 に答える