Question

正如标题已经暗示的那样，我正试图禁用一些路线。我正在使用角度种子项目，它已经有了很好的结构。

我正在使用JWT并且我正在尝试设置一个结构，如果某个路由要求用户登录，并且用户未登录，则会将其重定向到其他页面。

在我的angular.module我添加了以下代码：

.run(['$rootScope', 'userService', '$location', function($rootScope, userService, $location) {

    userService.init();

    $rootScope.$on('$routeChangeStart', function(event, next, current) {

        $rootScope.isPrivate = next['authenticate'];
        if ($rootScope.isPrivate) {
            if (!userService.get())
                $location.path('/');
        }

    });
}]);

这是一条受保护的路线：

angular.module('myApp.view2', ['ngRoute', 'ngCookies'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/admin/vnos-stevilke', {
        templateUrl: 'view2/view2.html',
        controller: 'View2Ctrl',
        authenticate: true
    }).when('/admin/vnos-stevilke/:id', {
        templateUrl: 'view2/view2.html',
        controller: 'View2Ctrl',
        authenticate: true
    });
}])

.controller('View2Ctrl', ['$scope', 'webServices', '$location', '$routeParams', function($scope, webServices, $location, $routeParams) {

    if ($routeParams.id)
        webServices.getBranchById($routeParams.id, function(err, data) {
            $scope.branch = data;
        });

    webServices.getCompanies(function(err, data) {
        console.log(data);
        console.log('no access!');
        if (!err)
            $scope.companies = data;
    });

}]);

现在起初似乎工作正常：如果我没有登录，则不会显示路由，我会被重定向回根目录。但仔细看，我注意到console.log('no access!');仍然显示在控制台中。所以看起来控制器被初始化了。

似乎整个路由已加载，然后在用户未登录时被重定向。这不是我正在寻找的行为。我正试图保持路由的加载，直到我确定用户已登录。

有什么想法吗？

更新

我根据下面的建议相应地更改了代码，但它似乎不起作用。我哪里出错？

检查用户是否已登录的userService方法：

this.isLogged = function() {
    var deferred = $q.defer();
    if (current === null) return deferred.reject();
    else return deferred.resolve(current);
};

运行方法：

.run(['$rootScope', 'userService', '$location', function($rootScope, userService, $location) {

    userService.init();

    $rootScope.$on('$routeChangeError', function() {
        $location.path('/');
    });
}]);

受限制的页面：

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/admin/vnos-stevilke', {
        templateUrl: 'view2/view2.html',
        controller: 'View2Ctrl',
        resolve: function(userService) {
            console.log('test');
            return userService.isLogged();
        }
    });
}])

这里，“测试”从不在控制台中显示。

Answer 1

您需要确定是否允许用户使用resolve路由参数进入受限区域。如果在一个resolve函数中解析了一个被拒绝的promise对象，它就会停止输入请求的路径。

我会写一些类似的东西：

$routeProvider.when('/restrictedURL',{
    ...some params,
    resolve: function(userService){
        return userService.get();   
    }
}

...并使userService.get返回一个Promise对象，该对象在会话处于活动状态时被解析，否则将被拒绝。

现在..如果承诺被拒绝，则路线无法启动并且会引发$routeChangeError事件，因此您需要以下内容：

angular.module('yourapp').run(function($rootScope){
    $rootScope.$on("$routeChangeError",function(){
         $location.path('/');
    });
});

详细了解解析参数@ https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

AngularJS - 禁用某些路由

1 个答案: