Angular.js：頁面閃爍身份驗證重定向

Question

我在Angular.js中實現了一些簡單的客戶端身份驗證邏輯。涉及的頁面有：

/account#/login (public) 
/account   (require login) 
/account#/settings (require login) 

當用戶沒有登錄並嘗試訪問要麼/account或/account/#/settings，應用程序應該重定向到登錄頁面。

我使用的UI路由器配置了以下路線：

$stateProvider 
    .state('overview', { 
    url: '/', 
    restricted: true 
    }) 
    .state('settings', { 
    url: '/settings', 
    restricted: true 
    }) 
    .state('login', { 
    url: '/login', 
    restricted: false 
    }) 

，並在網址的變化，我檢查即將到來的頁面是一個受限制的頁面，以及是否在當前用戶未登錄如果是這樣的重定向登錄。

app.run(function($rootScope, $location, $state, auth) { 
    $rootScope.$on('$stateChangeStart', function(event, next) { 
    if (next.restricted && !auth.isLoggedIn()) { 
     event.preventDefault(); 
     $state.go('login'); 
    } 
    }); 
}); 

auth僅僅是檢查登錄狀態，並返回任一true（登錄）或false（未登錄）的服務。

我的問題是：

即使這（種）的作品，我看到試圖在不登錄訪問受限制的頁面時，頁面閃爍問題的頁面閃爍的限制頁面的內容。快速將我重定向到登錄頁面之前。

我在網上做了一些研究，有些人提到在定義我的狀態時，潛在的解決方案可能會使用resolve，因爲除非解析成功，否則頁面將不會加載。但是，當我嘗試添加時

resolve: { 
    load: function(auth) { 
    return auth.isLoggedIn(); 
    } 
} 

它沒有工作。我錯過了什麼？正在使用resolve的方式去？

Answer 1

您目前的做法是檢查用戶是否已登錄，並將load設置爲true或false。此外，控制器在load已解決之前得到實例化，這就是您看到閃爍的原因。您需要在此處實現兩件事：

1. 確保在控制器實例化之前load已解決。
2. 如果用戶未登錄，請將用戶重定向到登錄頁面。

對於第一部分，我們需要使用promise，因爲在控制器實例化之前它將被解析並轉換爲值。這是個什麼文件說：

如果這些依賴關係都承諾，他們將得到解決，並 轉換爲一個值時，控制器進行實例化之前和 $ stateChangeSuccess事件。

下面的代碼可以做到這一點對我們：

var isLoggedin = ['auth', '$q', 
    function(auth, $q) { 
     var deferred = $q.defer(); 
     //assuming auth.isLoggedIn returns a promise 
     var loginPromise = auth.isLoggedIn(); 
     loginPromise.then(
      function(response) { 
       deferred.resolve(response); 
      }, 
      function(error) { 
       deferred.reject('Not logged in'); 
      }); 
     return deferred.promise; 
    } 
]; 

和各國將使用isLoggedin：

$stateProvider 
    .state('overview', { 
     url: '/', 
     resolve: { 
      loggedin: isLoggedin 
     } 
    }) 
    .state('settings', { 
     url: '/settings', 
     resolve: { 
      loggedin: isLoggedin 
     } 
    }) 
    .state('login', { 
     url: '/login' 
    }) 

對於第二個問題，那就是將用戶重定向到登錄頁面，你可以聆聽$stateChangeError事件，該事件在未解決狀態時觸發，並使用$state.go重定向用戶。