防止使用UI路由器加載角度控制器解決方案

Question

我試圖使用承諾來防止在UI路由器$resolve中加載狀態。

$stateProvider.state('base.restricted', { 

    url:'/restricted', 
    templateUrl: 'views/restricted.html', 
    controller: 'restrictedCtrl', 

    resolve: { // user must be logged-in to proceed 

     // authentication service checks session on back-end 
     authenticate: function ($q, $state, $timeout, AuthService){ 

      AuthService.validate(token).then(function(res){ 

       if(res.data.response.status===1) { // authenticated! 

        return $q.resolve(); // load state 

       } else { // authentication failed :(

        $timeout(function() { $state.go('base.notfound') }); // load not found page 
        return $q.reject(); // do not load state 
       } 

      }); 
     } 
    } 

}) 

此方案適用於根據驗證結果將用戶重定向的條款，但它看起來像，在驗證失敗時，控制器仍然被加載的用戶之前短暫的瞬間被重新定向到「未找到「狀態。

我相信原因是因爲我在解析中運行AuthService，但是以異步的方式。因此，控制器加載時，AuthService做它的事情，但一旦回調函數執行，然後重定向。

但不是resolve固有地應該是阻止？也就是說，控制器不會加載，直到resolve「已解決」？

AuthService基本上是這樣，供參考：

.service('AuthService', function($http){ 

    this.validate = function(token){ 

     return $http.get('http://my.api/validate/'+token); 
    } 
}); 

如何修改這個代碼，以防止加載，直到AuthService的回調函數已經完成。

Answer 1

您應立即返回，而不是從服務的響應後，這樣一個承諾，回來：

return AuthService.validate(token).then(function(res){ ... } 

否則路由器認爲沒有返回值，而不是一個承諾，所以它認爲它是確定以加載國家。之後，當您的AJAX請求返回時，您最終會重定向，這就是您看到閃爍的原因。