javascript - 防止 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 的元素)在应用程序命中 API 并获取 401 之前加载到我的页面上。

我通过在 MainController 的开头放置一个随机 API 调用来解决这个问题，它实际上没有做任何事情，但这似乎是错误的方法，因为我正在对服务器进行不必要的 ping .对此有什么建议和最佳做法吗？

此外，当我访问那些未经授权的路由时，我会在控制台中收到丑陋的 401 错误消息 - 有没有办法在不向用户显示这些消息的情况下执行此重定向，或者这是正常现象吗？

Answer 1

我认为 ng-cloak 可以在这里帮助你，因为你可以将它添加到应该隐藏的元素，直到你的应用程序被引导，我已经做了类似的事情，我会尝试给你一个例子