在AngularJS路由中，如何从$routeChangeStart路由参数获取URL？

Question

如何在$routeChangeStart中从路由参数中获取URL哈希片段？

$scope.$on('$routeChangeStart', function (event, next, current) {
  // trying to get the url hash fragment from <next> param here
  // e.g. to_url_function(next) -> '/my_path/1'
});

如果使用$locationChangeStart，接收URL哈希片段很容易，但这对我来说不是一个选项。

- dasboe

---

请查看以下内容：https://dev59.com/K2gu5IYBdhLWcg3wJT5I - stackg91

谢谢。我以前见过这个，但我不认为它对我的特定问题有帮助。 - dasboe

Answer 1

dasboe: 我认为我正在回答你的问题。

我有一个应用程序，其中在$routeChangeStart事件处理程序中进行身份验证/授权检查。如果没有经过身份验证，我会向用户呈现模态登录页面。我希望成功的登录将他们发送到原始目的地（$routeChangeStart的好处是，在成功登录后它将再次运行并检查授权）。我将从下一个路径中构建的路径保存在一个用户会话服务中，该服务被注入到模态登录控制器中。

以下是事件处理程序：

//before each route change, check if the user is logged in
//and authorized to move onto the next route
$rootScope.$on('$routeChangeStart', function (event, next, prev) {
    if (next !== undefined) {
        if ('data' in next) {
            if ('authorizedRoles' in next.data) {
                var authorizedRoles = next.data.authorizedRoles;
                if (!SessionService.isAuthorized(authorizedRoles)) {
                    event.preventDefault();
                    SessionService.setRedirectOnLogin(BuildPathFromRoute(next));
                    if (SessionService.isLoggedIn()) {
                        // user is not allowed
                        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
                    } else {
                        // user is not logged in
                        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
                    }
                }   
            }
        }
    }
});

这里是构建路径的函数，用于从下一个对象创建路径

function BuildPathFromRoute(routeObj)
{
    var path = routeObj.$$route.originalPath;
    for (var property in routeObj.pathParams)
    {
        if (routeObj.pathParams.hasOwnProperty(property))
        {
            var regEx = new RegExp(":" + property, "gi");
            path = path.replace(regEx, routeObj.pathParams[property].toString());
        }
    }
    return path;
}

注意：

• 我不喜欢我的$$route依赖，但是我找不到其他方法来做这件事。也许我错过了更容易的方法。从长远来看，我可能会招惹麻烦。
• preventDefault()在AngularJS 1.3.7之前的版本中不起作用（请参见angularjs应用程序中routeChangeStart上的event.preventDefault()无效）。
• 标准警告：这全部是在客户端执行的，并且容易被滥用。确保进行身份验证/授权在服务器端完成。
• 事件处理程序的下一个Route对象也有一个params属性。 我不确定是否应该像处理pathParams一样遍历它的属性。

- MikeSullivan

Answer 2

如果您不想使用hasOwnProperty，则可以利用$$route.keys获取pathParams字段名称的名称：

function getPathFromRoute(routeObj)
{
    var path = routeObj.$$route.originalPath;
    var keys = routeObj.$$route.keys;
    var value;       
    for (var i = 0; i < keys.length; i++) {
        if(angular.isDefined(keys[i]) && angular.isDefined(keys[i].name)){
            value = routeObj.pathParams[keys[i].name];
            var regEx = new RegExp(":" + keys[i].name, "gi");
            path = path.replace(regEx, value.toString());            
        }
    }     
    return path;
}; 

- med

Answer 3

不要像之前提供的答案那样使用以$$为前缀的对象字段，因为这是AngularJS用于私有属性的前缀。使用此方法获取路由中的URL（未经测试）：

    var buildPathFromRoute = function (route) {
    // get original route path
    var path = route.originalPath;
    // get params keys
    var keysLength = route.keys.length;
    for (var i=0; i<keysLength; i+=1) {
        var param = route.keys[i];

        // optional params postfix is '?'
        var postfix = param.optional ? '\\?' : '';

        var replaceString = ':' + param.name + postfix;
        var regex = new RegExp(replaceString, 'g');
        var paramValue = route.params[param.name].toString();

        // replace param with value
        path = path.replace(regex, paramValue);
    }

    path = path.replace(/\:\S+?\??/g, '');
    return path;
};

- Daniil