在重定向到登錄之前，阻止Angular站點上的未授權用戶暫時查看站點的最佳方法是什么？

Question

我目前正在一個站點上構建一個Angular前端，該站點從需要通過登錄授權的API中提取大部分數據。

我已經構建了以下運行良好的authInterceptor，如果從服務器發送401錯誤，則將用戶重定向到登錄頁面：

angular
  .module('myApp.services')
  .factory('authInterceptor', ['$rootScope', '$q', '$window', '$location', function($rootScope, $q, $window, $location) {

    return {
        'request': function(config) {
          config.headers = config.headers || {};
          if ($window.sessionStorage.token) {
            config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
          }

          return config;
        },
        'response': function(response) {
          return response || $q.when(response);
        },
        responseError: function(rejection){
          if (rejection.status == 401){
            $location.path('#/login');
          }
          return $q.reject(rejection);
        }

      };
  }])

這個問題是API調用，因此，在頁面加載過程結束之前不會發生401錯誤 - 因此，用戶可以看到所有元素中的一小部分（例如，HTML，CSS，圖像和在應用程序訪問API並獲取401之前，在我的頁面上加載的所有其他元素（未訪問API）。

我通過在我的MainController的開頭放置一個隨機的API調用來解決這個問題，它實際上沒有做任何事情，但這似乎是錯誤的方法，因為我正在對服務器進行不必要的ping。 有關此的任何建議和最佳做法？

此外，當我點擊那些未經授權的路線時，我在我的控制台中收到了丑陋的401錯誤消息 - 是否有辦法進行此重定向而不向用戶顯示這些或這是正常的嗎？

Answer 1

我認為ng-cloak可以幫助你，因為你可以將它添加到應該被隱藏的元素，直到你的應用程序被引導，我做了類似的事情，會試着給你一個例子

Answer 2

如果您使用ui-router進行應用程序路由，則可以在“已驗證”狀態的父級中使用嵌套狀態和resolve子句，以確保只有在“登錄”請求成功時才能訪問該控制器/模板解決並在請求失敗時重定向到“登錄”狀態。

以下是有關如何使用ui-router保護“已驗證”路由的一些指導：

http://blog.john.mayonvolcanosoftware.com/protecting-routes-in-angularjs/