Angular JS $locationChangeStart 获取下一个 url 路由对象答案

【问题标题】：Angular JS $locationChangeStart get next url route objectAngular JS $locationChangeStart 获取下一个 url 路由对象
【发布时间】：2014-12-27 18:37:29
【问题描述】：

我正在尝试在我的 Angular 应用程序上实现授权，当路由更改时，我想检查该路由是否已为用户授权。我尝试使用$routeChangeStart，但它并不能阻止该事件。

我当前的代码：

$scope.$on('$routeChangeStart', function(event, next, current) {
        if(current_user.is_logged_in){
            var route_object = next.route_object;
            if(!(route_object.route_roles)){
                event.preventDefault();
            }
        }
    });

在我的next 对象中，我得到了在我的$routeProvider 中设置的 route_object

var routes = object;
    app.config(function($routeProvider) {
                $routeProvider.when(url, {
                    templateUrl: "/users.html",
                    route_object: routes,
                    });
            });

routes 是在我的函数中形成的一个对象，但是当我使用 $locationChangeStart 时，我只是获取下一页和上一页的 url，

如何获取整个路由对象？？

【问题讨论】：

标签： angularjs authorization angularjs-routing

【解决方案1】：

您可以像这样在$locationChangeStart 事件监听器中获取路由参数：

$scope.$on('$locationChangeStart', function(event, next, current) {
    if(current_user.is_logged_in){
        var route_object = ($route.routes[$location.path()]).route_object; //This is how you get it
        if(!(route_object.route_roles)){
            event.preventDefault();
        }
    }
});

然后经典的 preventDefault 方法就可以完成这项工作。这是我为类似的东西写的plunker。

【讨论】：

这实际上对我有用，但问题是 $location.$$path 返回 /users 但在我的路由中，我的 URL 为 /users/:id?，因此出现错误。
这不起作用。如果 $location.path 是 /user/10 那么路由 /user/:id 找不到。
仅供参考，如果您使用的是 ui.router，则需要使用 $stateChangeStart。

【解决方案2】：

    $routeProvider
        .when('/', {
            title: 'Home',
            templateUrl: 'partials/home',
            controller: 'HomeController',
            access: {
                isFree: true
            }
        })
        .when('/about-us', {
            title: 'About us',
            templateUrl: 'partials/aboutus',
            controller: 'AboutUsController',
            access: {
                isFree: true
            }
        })
        .when('/how-it-works', {
            title: 'How It Works',
            templateUrl: 'partials/howitworks',
            controller: 'HowItWorksController',
            access: {
                isFree: true
            }
        })
        .when('/login', {
            templateUrl: 'users/login',
            controller: 'LoginController',
            access: {
                isFree: true
            }
        })
        .when('/logout', {
            controller: 'LogoutController',
            access: {
                isFree: false
            }
        })
        .when('/sign-up', {
            templateUrl: 'users/signup',
            controller: 'SignUpController',
            access: {
                isFree: true
            }
        })
        .otherwise({
            redirectTo: '/'
        });
})


.run(['$rootScope', '$location','$log','$window','Auth' ,function($rootScope, $location, $log, $window, Auth) {

    $rootScope.$on('$routeChangeStart', function(event, currRoute, prevRoute){
        $rootScope.title = '';
        if(currRoute.$$route.title !== undefined){
            $rootScope.title = currRoute.$$route.title ;
        }
      //  $rootScope.userLoggedIn = {name : 'Hi, '+ 'Amar'}    

        let checkIsLoggedInForRoute = ['/login','/sign-up'];
        let isFreeAccess = currRoute.$$route.access.isFree;
        let isLoggedIn = Auth.isLogin();

        if(isFreeAccess){
            if(checkIsLoggedInForRoute.indexOf($location.path()) !== -1 && isLoggedIn){
                event.preventDefault();
                $location.path('/')   
            }
        }else if(!isFreeAccess){
            let isLogoutRoute = currRoute.$$route.originalPath.indexOf('/logout') !== -1;
            if(isLogoutRoute && isLoggedIn){
                Auth.logout();           
                $location.path('/');    
            }else if(isLogoutRoute && !isLoggedIn){ 
                $location.path('/login');
            } 
        }
    });
}]);

【讨论】：

您好，欢迎来到 StackOverflow！这个答案如何改进已经存在的、被接受的答案？
您可以通过添加有关此答案如何工作的描述以及它如何改善提问者的情况来提高此答案的质量。

【解决方案3】：

next.$$route 包含什么？

应该有一个next.$$route.route_object

【讨论】：

在$locationChangeStart next 里面只是一个字符串。
不，不要使用 $locationChangeStart... $routeChangeStart 是您想要的位置：$scope.$on('$routeChangeStart', function(event, next, current) { console.log(JSON.stringify(next.$$route, null, 4)); if(current_user.is_logged_in){ var route_object = next.$$route.route_object; if(!(route_object.route_roles)){ event.preventDefault(); } } });
是的，可以，但我无法阻止$routeChangeStart中的事件
似乎没有办法否定该事件（因为你在一个从广播中触发的函数中）......但我发现这可能会有所帮助：link
抱歉，您的问题是：如何获取整个路由对象？这就是我试图回答的全部......

【解决方案4】：

您也可以使用 $location 提供程序来执行此操作：

.run(['$rootScope','$location',function($rootScope,$location){
      $rootScope.$on('$routeChangeStart', function(event,next, current) {
       console.log('next',next);
       console.log('location',$location.path());
       console.log('location',$location.search()); // for route params
     });
    }])`

【讨论】：