2

私のアプリには2つのページがあります：main.htmlとlogin.html。認証されていないユーザーがアクセスする/main場合は、にリダイレクトする必要があります/login。

問題は、main.html最初にレンダリングされ、1秒ほど後に、ユーザー認証が失敗したときにlogin.htmlレンダリングされることです。

main.html認証が成功するまでレンダリングされないようにするにはどうすればよいですか？

関連するコード（CoffeeScript）は次のとおりです。

angular.module('myApp', [...])
.config(['$routeProvider', ($routeProvider) ->
  $routeProvider.when '/login',
    templateUrl: 'html/login.html'
    controller: LoginController

  $routeProvider.otherwise
    templateUrl: 'html/main.html'
    controller: MainController
])
.run(['$rootScope', '$location', 'appService', ($rootScope, $location, app) ->
  $rootScope.$on '$locationChangeStart', (event, newValue, oldValue) ->
    return if newValue == '/login'

    $.when(app.authenticate()).fail ->
      $location.path '/login'
      $rootScope.$apply()
])

angular.module('myApp.services').factory 'appService' , () ->
  rootRef = new Firebase('https://myapp.firebaseio.com')

  user: null
  authenticate: ->
    deferred = $.Deferred()

    authClient = new FirebaseAuthClient rootRef, (error, user) =>
      if error
        # An error occurred while attempting login
        @user = null
        deferred.reject()
      else if user
        # User authenticated with Firebase
        @user = user
        deferred.resolve()
      else
        # User is logged out
        @user = null
        deferred.reject()

    deferred.promise()
4

3 に答える 3

1

main.htmlユーザーが認証されるまで、テンプレートを提供しません (あなたの場合)。ユーザーが認証されているかどうかを確認するテンプレートを提供するために、サーバー上にカスタマイズされた機能があります。関数でユーザーがログインしていないことがわかった場合、401ステータスコードで応答を返します。angularコードでは、認証までリクエストを保持してから、テンプレートを再度要求します。

私はこの投稿に触発されました: http://www.espeo.pl/2012/02/26/authentication-in-angularjs-application

于 2013-02-22T14:56:34.003 に答える
0

1 つのオプションは、通常の DOM を非表示にして、おそらくスピナーを使用して「認証中...」メッセージを表示し、何かが起こるのを待っている理由をユーザーに知らせることです。main.html に、次のようなものを含めます。 

<spinner ng-hide="appService.wrapper.user"></spinner>
<!-- everything else ng-show="appService.wrapper.user" -->

whereは、カスタムの「Authenticating...」メッセージに置き換えられる<spinner></spinner>Angularディレクティブuserであり、appService が で使用できるようにする変数ですMainController。user次のように、appService 内でオブジェクトをラップする必要がある場合があることに注意してください。

.service('appService', function() {

  var wrapper = {
    user: null
  };

  function authenticate() {
    // start the authentication and return the promise,
    // but modify wrapper.user instead of user
  }

  return wrapper;

});

appServiceまたはappService.wrapperの$scope変数に格納する必要もありますMainController。

于 2013-02-26T20:48:23.250 に答える
0

同じ要件に対する私の解決策は、次のウォッチを定義することでした。

$rootScope.$watch(
    function() {
        return $location.path();
    },
    function(newValue, oldValue) {  
        if (newValue != '/login' && user is not logged in) {
            $location.path('/login');  
        }
    },
    true);

インデックス ページ (つまり、ng-viewディレクティブを含むページ) の body 要素に関連付けられたコントローラー内。

于 2013-02-22T16:59:59.847 に答える