Question

我正在尝试在AngularJS中实现基本身份验证路由。我有一个模型，它有一个返回promise的authorize方法。我希望路由等到授权函数返回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

你的解决方案与我之前写的原型非常相似。

这个想法是，无论何时“触摸”服务器并获得身份验证错误，都会弹出一个模式窗口，要求登录而不用更改URL（您可以将其更改为新URL并留在那里。）

我的实现也是基于拦截器检查401.它依赖于$ rootScope并将属性“needsLogin”设置为true。页面模板在needsLogin === true时可以看到登录模式窗口并隐藏ng-view（这很重要，因为新路由已经加载但是它错过了它的数据）。最后，成功登录后，登录控制器会执行$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>

登录控制器可以是：

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()不是整页刷新，它只是重新初始化路由（控制器/视图等）。希望之前被拒绝的呼叫会再次运行，页面也会没问题。

具有授权过程的AngularJS路由

1 个答案: