2

私は数日間angularjsで遊んでいて、今のところ気に入っています。ユーザーがgmail.comを使用しているときに、すべてのgmailメッセージの下に小さなウィジェットを添付するクロム拡張機能を構築しようとしています. ここまでは順調ですね。認証コードの一部として、この方法で 401 エラーを処理します。401 エラーが発生するたびに、 $location.path( "/login" ) を使用して、ユーザーをログイン画面/テンプレートにリダイレクトします。これにより、デフォルトの動作と思われるブラウザのアドレス バーが変更されます。したがって、現在のアドレスがhttps://mail.google.com/mail/u/0/だった場合、 https://mail.google.com/mail/u/0/#/loginになります。. しかし、私のものはスタンドアロン アプリではなく、gmail.com サイトで div にアタッチするウィジェットに似ています。アプリがブラウザーのアドレス バーを台無しにしないようにする必要があります。デフォルトの動作に反しているため、アプリに本当に angularjs を使用できるかどうかを考え始めています。angularjs を使用する必要がありますか?

ここにも投稿しました https://groups.google.com/forum/?fromgroups#!topic/angular/TrT54r_IYmg

4

1 に答える 1

1

rootScope でイベントを発行/ブロードキャストし、ログイン ディレクティブでそれらをサブスクライブできます。

ここに少し手がかりがあります http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

インターセプターを使用して401をキャッチします

myapp.config(function($httpProvider) {
  var interceptor = ['$rootScope','$q', function(scope, $q) {

    function success(response) {
      return response;
    }

    function error(response) {
      var status = response.status;

      if (status == 401) {
        var deferred = $q.defer();
        var req = {
          config: response.config,
          deferred: deferred
        }
        scope.requests401.push(req);
        scope.$broadcast('event:loginRequired');
        return deferred.promise;
      }
      // otherwise
      return $q.reject(response);

    }

    return function(promise) {
      return promise.then(success, error);
    }

  }];
  $httpProvider.responseInterceptors.push(interceptor);
});

そして、最も単純なディレクティブはこれです

myapp.directive("loginForm",function($http){
  return function(scope,element,attrs){
    element.hide();

    scope.$root.$on('event:loginRequired', function(event) {
      element.show();
    });

    scope.login=function(){
      // You can set controller for this directive, but I skiped that part for sake of simplicity
      var payload = $.param({username: scope.username, password: scope.password});
      var config = {
        headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
      }
      $http.post('/some/login/url', payload, config).success(function(data) {
        if (data === 'AUTHENTICATION_SUCCESS') {
          element.hide();
        }else{
          alert("username or password was wrong, please try again");
          elements.find("form").reset(); // reset form, or you coud reset just password field
        }
      });
    };


  };
});

現在、ディレクティブの実行中

<div login-form>
   <form ng-submit="login()">
      <label for="username">Username</label>
      <input type="text" id="username" ng-model="username"/>
      <br />
      <label for="password">Password</label>
      <input type="password" id="password" ng-model="password" />
      <hr/>
      <input type="submit" value="Login" />
   </form>
</div>

上記のコードはテストされていないことに注意してください。おそらくスペルミスか何かがあるでしょう。しかし、これを実装するのに問題がある場合はお知らせください。機能させるために時間と労力を費やします。

于 2012-08-21T02:27:37.570 に答える