Question

我的一些AngularJS路由是要求用户通过我的API进行身份验证的页面。在这些情况下，我希望将用户重定向到登录页面，以便他们进行身份验证。例如，如果访客访问/account/settings，则应将其重定向到登录表单。

从头脑风暴中我想出了$locationChangeStart事件，如果它是需要身份验证的位置，那么将用户重定向到登录表单。我可以在我的应用程序run()事件中做到这一点很简单：

.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$locationChangeStart', function(event) {
        // Decide if this location required an authenticated user and redirect appropriately
    });
}]);

下一步是保留我需要身份验证的所有应用程序路由的列表，因此我尝试将它们作为参数添加到我的$routeProvider：

$routeProvider.when('/account/settings', {templateUrl: '/partials/account/settings.html', controller: 'AccountSettingCtrl', requiresAuthentication: true});

但我认为没有办法从requiresAuthentication事件中获取$locationChangeStart密钥。

我是否过度思考这个？我试图为Angular找到一种原生方式但却找不到任何东西的方法。

Answer 1

我在项目中使用angular-http-auth。如果您有后端更容易委托处理身份验证，在每个401响应中自动显示登录表单，而不是在客户端和服务器上复制身份验证映射。

Answer 2

我所做的是实现一个处理http请求错误的angularjs拦截器。基本上，我所做的是当我从后端获得401（未授权）时，我保存当前的URL并将用户重定向到登录页面。当用户成功登录时，我检索已保存的URL以使用$ location设置路径。

app.config(function ($routeProvider, $locationProvider, $httpProvider) {

    /* Global interceptor for 401 - not authorized */
    var interceptor = ['$location', '$q', 'authorizationService', function ($location, $q, authorizationService) {

        function success(response) {
            return response;
        }

        function error(response) {
            if (response.status === 401) {
                authorizationService.saveUrl($location.path());
                $location.path('/logon');
                return $q.reject(response);
            }
            else {
                return $q.reject(response);
            }
        }

        return function (promise) {
            return promise.then(success, error);
        };
    } ];
});

在登录控制器中（成功登录时）我设置了如下位置：

$location.path(authorizationService.getUrl());

在AngularJS应用程序中使用身份验证保护路由

2 个答案: