javascript - 具有授权过程的 AngularJS 路由

Question

我正在尝试在 AngularJS 中实现基本的身份验证路由。我有一个模型，它有一个返回 promise 的授权方法。我希望路由等到授权函数返回 true 或 false 才能继续，一旦完成，它应该恢复路径或将用户重定向到登录页面。

我认为基本上我需要停止路由，调用该方法然后恢复或重定向到登录。下面是我到目前为止的代码，但我不确定如何完成暂停/恢复。有什么想法吗？

return angular.module('d', ['ngCookies', 'ngRoute'])
    .config(['$routeProvider', '$locationProvider', '$httpProvider', 
        function ($routeProvider, $locationProvider, $httpProvider) {

            $routeProvider.when('/',
            {
                templateUrl: 'views/home.html',
                controller: 'HomeCtrl'
            });
            $routeProvider.when('/login',
            {
                templateUrl: 'views/login.html',
                controller: 'LoginCtrl'
            });

            $routeProvider.otherwise({ redirectTo: '/404' });
            $locationProvider.html5Mode(true);

            // handle unauthorized requests by redirecting to login page
            $httpProvider.responseInterceptors.push(
                ['$location', '$q', function ($location, $q) {
                    function success(response) {
                        return response;
                    }

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

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

        }])
    .run(['$rootScope', '$location', 'Auth', function ($rootScope, $location, Auth) {

        $rootScope.$on("$routeChangeStart", function (event, next, current) {
            $rootScope.error = null;
            Auth.authorize().then(function(){
                $location.path('/');
            },function(){
                $location.path('/login');
            });
        });

    }]);

Answer 1

您的解决方案与我不久前写的原型(prototype)非常相似。

这个想法是，每当您“触摸”服务器并遇到身份验证错误时，都会弹出一个模式窗口，要求登录 不更改 URL(您让它更改为新的 URL并留在那里)。

我的实现也基于检查 401 的拦截器。它依赖于 $rootScope 并将属性“needsLogin”设置为 true。页面模板在 needsLogin === true 时显示登录模式窗口并隐藏 ng-view(这很重要，因为新路由已加载但它丢失了它的数据)。最后，在成功登录后，登录 Controller 执行 $route.reload() 然后设置 $rootScope.needsLogin = false。

小片段:

<div id="main" role="main" ng-show="needsLogin === false">
    <div ng-view></div>
</div>

<div ng-show="needsLogin === true" ng-include="'views/login.html'" class="overlay"></div>

登录 Controller 可以是这样的:

function LoginCtrl($scope, $rootScope, $route, $http) {

    $scope.login = function () {
        $http.post( /* Somehow do your login */ )
            .success(function () {
                var deregister = $rootScope.$on('$routeChangeSuccess', function () {
                    // hide login / show ng-view after route has been reloaded
                    $rootScope.needsLogin = false;
                    deregister();
                });
                $route.reload();
            })
            .error(function () {
                /* handle errors */
            });
    };
}

$route.reload() 不是整个页面刷新，它只是重新初始化路由( Controller / View 等)。希望之前被拒绝的调用能够再次运行并且页面会正常。