Question

我刚刚开始使用我正在开发的AngularJS应用程序，一切进展顺利，但我需要一种保护路由的方法，以便用户不会被允许去那条路线登录。我也理解在服务方面保护的重要性，我将负责这一点。

我找到了许多保护客户端的方法，似乎使用了以下

$scope.$watch(
    function() {
        return $location.path();
    },
    function(newValue, oldValue) {
        if ($scope.loggedIn == false && newValue != '/login') {
            $location.path('/login');
        }
    }
);

我需要在.run的{{1}}中将其放在哪里？

我找到的另一种方法是使用指令并使用on-routechagestart

信息在这里http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app

我真的对任何人的推荐方式的帮助和反馈感兴趣。

Answer 1

使用解决方案应该可以帮到你:(代码未测试）

angular.module('app' []).config(function($routeProvider){
    $routeProvider
        .when('/needsauthorisation', {
            //config for controller and template
            resolve : {
                //This function is injected with the AuthService where you'll put your authentication logic
                'auth' : function(AuthService){
                    return AuthService.authenticate();
                }
            }
        });
}).run(function($rootScope, $location){
    //If the route change failed due to authentication error, redirect them out
    $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
        if(rejection === 'Not Authenticated'){
            $location.path('/');
        }
    })
}).factory('AuthService', function($q){
    return {
        authenticate : function(){
            //Authentication logic here
            if(isAuthenticated){
                //If authenticated, return anything you want, probably a user object
                return true;
            } else {
                //Else send a rejection
                return $q.reject('Not Authenticated');
            }
        }
    }
});

Answer 2

使用resolve的{{1}}属性的另一种方法：

$routeProvider

这样，如果angular.config(["$routeProvider", function($routeProvider) { "use strict"; $routeProvider .when("/forbidden", { /* ... */ }) .when("/signin", { /* ... */ resolve: { access: ["Access", function(Access) { return Access.isAnonymous(); }], } }) .when("/home", { /* ... */ resolve: { access: ["Access", function(Access) { return Access.isAuthenticated(); }], } }) .when("/admin", { /* ... */ resolve: { access: ["Access", function(Access) { return Access.hasRole("ADMIN"); }], } }) .otherwise({ redirectTo: "/home" }); }]);无法解析承诺，则会触发Access事件：

$routeChangeError

请参阅this answer上的完整代码。

AngularJS：根据用户是否获得授权，使用angularjs保护路由？

2 个答案: