在重定向到登录之前，阻止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/