AngularJS——禁用一些路由

AngularJS - disable some routes

本文关键字：路由 AngularJS      更新时间：2023-09-26

正如标题所示，我正在尝试禁用一些路由。我用的是角种子项目，它已经有一个很好的结构。

我正在使用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();
        }
    });
}])

在这里，"test"不会显示在控制台中。

你需要决定你是否让用户进入限制区域与resolve路由参数。如果其中一个resolve函数解析了一个被拒绝的promise对象，它将停止进入请求的路由。

我会这样写:

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

…并使userService。get返回一个Promise对象，如果会话是活动的则解析，否则拒绝。

现在. .如果promise被拒绝，路由将不会启动并且引发$routeChangeError事件，所以你需要这样做:

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

阅读更多关于解析参数@ https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

相关文章：