0

私のアプリには、GoogleのFirebaseを使用して認証が含まれています。私は彼らの文書https://www.firebase.com/docs/web/libraries/angular/guide/user-auth.htmlに従っています。この方法ではstateChangeが使用されていますが、わかりましたが、これはui-routerで廃止されました。 、私はエラーを処理しようとしていますので、ユーザーは認証を必要とするページにアクセスしようとすると

app.run(($transitions, $state) => { 
    $transitions.onError({}, ($transition$) => { 
     if ($transition$.$to().name !== 'init' && $transition$.$from().name !== 'error') { 
      $state.go("login"); 
     } 
    }); 
}); 

app.run(["$rootScope", "$state", function($rootScope, $state) { 

    $rootScope.$on("$stateChangeError", 
     function(event, toState, toParams, fromState, fromParams, error) { 
      console.log('HELLO') 
      if (error === "AUTH_REQUIRED") { 
       $state.go("login"); 
     } 
    }); 
}]); 

へ:だから私はこのからの例から私のスクリプトを向けオンライン探しログイン画面に戻ります。 2番目のアプローチは機能しており、状態をloginに変更しようとするとフリーズします。

質問

なぜ私のスクリプトは、再直接するloginページにユーザーを彼らが認証を必要とするページにアクセスしようとすると失敗していますか?

app.config(['$stateProvider', function($stateProvider,) { 

    $stateProvider 
    .state('login', { 
     url: '/login', 
     component: 'login' 
    }) 
    .state('patents', { 
     url: '/patents', 
     component: 'patents', 
     resolve: { 
      currentAuth: function(authentication) { 
       return authentication.requireAuth(); 
      } 
    }); 
}]); 


app.factory('authentication', ['$rootScope', '$location', '$firebaseAuth', '$firebaseObject', function($rootScope, $location, $firebaseAuth, $firebaseObject) { 

var auth = $firebaseAuth(); 

//LOAD OF OTHER AUTHENTICATION METHODS 

    return { 

     requireAuth: function() { 
      return auth.$requireSignIn(); 
     } 
    } 
}])  

答えて

1

私も同様の使用例がありました。私はあなたの特定の質問に対する答えを実際に理解するのに時間が足りませんが、私はあなたの状況に対する解決策を提供することができます。

移行が開始される前に認証を処理してみましょう。

$stateProvider 
.state('login', { 
    url: '/login' 
    // + some template/controller/resolve... 
}) 
.state('home', { 
    url: '/home' 
    // + some template/controller/resolve... 
}) 

をそしてHERESに認証工場onBeforeため

app.factory("Auth", ["$firebaseAuth", function($firebaseAuth) { 
    return $firebaseAuth(); 
}]); 

ドキュメントがhereを見つけることができます:

app.run(["$state", '$transitions', '$q', 'Auth', 
    function($state, $transitions, $q, Auth) { 

    //overrides default error outputting by ui.router 
    $state.defaultErrorHandler(function(error) { 
    console.error(error); 
    }); 

    //redirects to login page if we're not signed in 
    $transitions.onBefore({to: 'home.**', from: '**'}, function(trans) { 
    var deferred = $q.defer(); 

    Auth.$requireSignIn().then(function() { 
     //we're signed in, so proceed to home.** 
     deferred.resolve(); 
    }).catch(function() { 
     //we're not signed in and home.** requires authentication 
     //so resolve with the state you want to reroute to, refreshing 
     //the url w/ reload === true 
     var params = { reload: true }; 
     deferred.resolve($state.target('login', undefined, params)); 
    }); 

    return deferred.promise; 
    }); 

    //redirects to home page if we're signed in 
    $transitions.onBefore({to: 'login.**', from: '**'}, function(trans) { 
    var deferred = $q.defer(); 

    Auth.$requireSignIn().then(function() { 
     //we're signed in, so lets avoid going to login, and instead 
     //go to our authenticated state 
     var params = { reload: true }; 
     deferred.resolve($state.target('home', undefined, params)); 
    }).catch(function() { 
     //we're not signed in, so continue to login.** 
     deferred.resolve(); 
    }); 

    return deferred.promise; 
    }); 
}]); 

Configがこのようになります。

+0

@ Vincentにお返事ありがとうございます。すべては動作しますが、認証が必要なアプリケーションでは複数のページがありますが、 '$ transitions.onBefore({to: 'patents。**'、from: '**'}'ユーザをログインページに戻す複数の州? –

+0

私を無視してください。ドキュメントを読んでください。 –

関連する問題