防止Angular网站上未经授权的用户在重定向到登录之前看到网站的最佳方式

Best way to prevent unauthorized user on Angular site from seeing site for a split second before being redirected to login?

本文关键字：网站 登录 方式 最佳 重定向 用户 Angular 防止 授权      更新时间：2023-09-26

我目前正在一个站点上构建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错误直到页面加载过程结束才会发生-因此，在应用程序访问API并获得401之前，用户可以看到页面上加载的所有元素（例如，HTML、CSS、图像和所有其他未访问API的元素）的一瞬间。

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

此外，当我遇到那些未经授权的路由时，我会在控制台中收到丑陋的401错误消息——有没有一种方法可以在不向用户显示这些消息的情况下进行重定向，或者这很正常？

我认为ng斗篷可能会在这里对您有所帮助，因为您可以将其添加到应该隐藏的元素中，直到您的应用程序启动，我也做了类似的事情，将尝试为您提供一个示例

如果您使用ui路由器进行应用程序路由，您可以在"已验证"状态的父级中使用嵌套状态和解析子句，以确保只有在"登录"请求已成功解析时才能访问该控制器/模板，并在请求失败时重定向到"登录"状态。

以下是一些关于如何使用ui路由器保护"已验证"路由的指南：

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

相关文章：