如何在使用 Angularjs 进行哈希处理后解析 URL 参数？答案

【问题标题】：How do I parse URL params after a hash with Angularjs?如何在使用 Angularjs 进行哈希处理后解析 URL 参数？
【发布时间】：2014-01-19 15:05:16
【问题描述】：

我正在尝试从 Foursquare 解析 access_token，其中 URL 如下所示：

https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX

我已经尝试了 $routeParams 和 $location 并没有得到任何回报。只有在我尝试了 $route 之后，我才得到了一个包含以下属性的对象：

current:  { 
    params:  {  } 
    pathParams:  {  } 
    loadedTemplateUrl: partials/4sqredirect
    locals:  {  } 
    scope:  { 
        this:  { 
            $ref: $["current"]["scope"]
        } 
        route:  { 
            $ref: $
        } 
        location:  {  } 
        token: null
    }
}

这是否意味着由于散列的原因，无法使用原生 AngularJS 函数获取它？

更新：

我的控制器如下所示：

angular.module('myApp')
    .controller('4sqredirectCtrl', function ($scope, $route, $location, $routeParams) {
        $scope.route = $route;
        $scope.location = $location;
        $scope.token = $routeParams.access_token;
    });

我的主要js如下：

angular.module('myApp', [
    'ngCookies',
    'ngResource',
    'ngSanitize',
    'ngRoute'
])
.config(function ($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true);

    $routeProvider
    .when('/', {
        templateUrl: 'partials/main',
        controller: 'MainCtrl'
    })
    .when('/4sqredirect/', {
        templateUrl: 'partials/4sqredirect',
        controller: '4sqredirectCtrl'
    })
    .otherwise({
        redirectTo: '/'
    });
});

【问题讨论】：

标签： javascript angularjs url foursquare angularjs-routing

【解决方案1】：

从angular location service$location.hash()方法返回#after-hash

所以如果你的网址看起来像

https://mywebsite.com/4sqredirect/#access_token=1234567890XXXXX

然后

$location.hash()返回access_token=1234567890XXXXX

你需要拆分split('=')[1]

点击4Square时看到这个plunker然后$location.url()返回

/4sqredirect/#access_token=123456
$location.hash().split('=')[1]

返回123456

【讨论】：

这很好用。我的问题的主要部分是我的一个愚蠢的错误。我试图自己使用 $location 或 $location.hash 而不是调用它们.. 例如。 $location.hash()。然而，虽然 $location.hash() 有效，但 $location.search() 仍然没有返回任何内容......不过，我的问题似乎已经得到了回答。
调用$location.hash() 会返回散列之后的所有内容，但不会返回散列本身。在您提供的示例中，它将返回 after-hash，而不是 #after-hash。
$location 没有为我定义，但是 window.location.hash.split 成功了！
这比拆分更好，当可用和需要时...var searchParams = new URLSearchParams($location.hash())。然后你可以使用searchParams.get('access_token')。参考：https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams.

【解决方案2】：

使用$location.search()

//e.g. url https://www.example.com/#!?name=123
var s = $location.search();
// {name: '123'}

http://docs.angularjs.org/api/ng.$location

搜索：

在不带任何参数调用时返回当前 url 的搜索部分（作为对象）。

【讨论】：

这不起作用。 $location.search 什么也没返回。也许是因为 URL 没有“？”，所以它不解析它？
当然，如果没有它，那么它不是搜索。添加“？”
很遗憾，我无法添加 ?因为那部分是预定义的并返回给我。

【解决方案3】：

我不知道有一种“本机角度”的方法，但您确实可以通过location.hash 作为字符串类型访问散列。它可能并不理想，但它是可行的。

【讨论】：

Location 也为空，所以我什至没有 location.hash。
我不是 100% 确定，但 location 应该始终反映浏览器的当前位置。你试图用访问令牌做什么？并且，它是在 4sq 或您的哈希之后返回的吗？我会假设它是作为查询字符串参数出现的。
4sq返回。 developer.foursquare.com/overview/auth "如果用户接受，他们将被重定向回YOUR_REGISTERED_REDIRECT_URI/#access_token=ACCESS_TOKEN"

【解决方案4】：

事实上，Angular JS 并没有直接支持这样做。我不会使用ngRoute，因为它可能已经期望# 在不同的地方。解决您的问题的一个简单方法是使用 location.hash 和 substring() 函数：

<!DOCTYPE html>
<html ng-app="app">

<head>
<script src="http://code.angularjs.org/1.2.6/angular.js"></script>
<link href="style.css" rel="stylesheet" />
<script>
angular.module('app', [])
.controller('AppCtrl', ['$scope', '$window', function($scope, $window) {
  $scope.accessToken = $window.location.hash.substring(14);
}]);
</script>
</head>

<body ng-controller="AppCtrl">
<h1>Access Token</h1>
<p>{{accessToken}}</p>
</body>

</html>

【讨论】：

你和 Reza 的想法有些相同，但确实可行。我更喜欢 Reza，因为它使用 $location 服务而不是 $window 服务。