AngularJS：如何清除URL中的查询参数？

Question

我的AngularJS应用程序需要访问用户的LinkedIn个人资料。为了做到这一点，我需要将用户重定向到包含回调redirect_uri参数的LinkedIn URL，该参数将告诉LinkedIn将用户重定向回我的webapp并在URL中包含“代码”查询参数。这是传统的Oauth 2.0流程。

除了LinkedIn将用户重定向回以下网址外，一切都很有效：

http://localhost:8080/?code=XXX&state=YYY#/users/123/providers/LinkedIn/social-sites

我想从网址中删除?code=XXX&state=YYY以使其保持干净。用户不需要查看我从LinkedIn重定向收到的查询参数。

我尝试了$location.absUrl($location.path() + $location.hash()).replace()，但它将查询参数保留在网址中。

我也无法提取查询参数，例如“代码”，使用($location.search()).code。 好像有吗？在上面的URL中的＃之前欺骗Angular。

Answer 1

我用

$location.search('key', null)

因为这不仅会删除我的密钥，还会将其从URL上的可见性中删除。

Answer 2

我最终得到了AngularJS论坛的答案。有关详细信息，请参阅this thread

---

此链接指向Google网上论坛主题，该主题难以阅读且无法提供明确答案。要删除网址参数，请使用

$location.url($location.path());

Answer 3

要删除所有查询参数，请执行以下操作：

$location.search({});

要删除 ONE 特定查询参数，请执行以下操作：

$location.search('myQueryParam', null);

Answer 4

要清除项目，请将其删除并调用$$撰写

    if ($location.$$search.yourKey) {
        delete $location.$$search.yourKey;
        $location.$$compose();
    }

派生自angularjs来源：https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Answer 5

您可以使用以下方法删除特定查询参数：

delete $location.$$search.nameOfParameter;

或者您可以通过将搜索设置为空对象来清除所有查询参数：

$location.$$search = {};

Answer 6

在撰写本文时，如前所述@Bosh，html5mode必须为true才能设置$location.search()并将其反映回窗口可视URL。

有关详细信息，请参阅https://github.com/angular/angular.js/issues/1521。

但如果 html5mode 为true ，您可以轻松清除网址的查询字符串：

$location.search('');

或

$location.search({});

这也会改变窗口的可视URL。

（使用1.3.0-rc.1在AngularJS版本html5Mode(true)中进行测试。）

Answer 7

需要在html5mode = false？

时使其有效

所有其他答案仅在Angular的html5mode为true时才有效。如果您在html5mode之外工作，则$location仅指＆＃34;假冒＆＃34;存在于您的哈希中的位置 - 因此$location.search无法查看/编辑/修复实际网页的搜索参数。

这是一个变通方法，在角度加载之前插入页面的的HTML中：

<script>
  if (window.location.search.match("code=")){
    var newHash = "/after-auth" + window.location.search;
    if (window.history.replaceState){
      window.history.replaceState( {}, "", window.location.toString().replace(window.location.search, ""));
    }
    window.location.hash = newHash;
  }
</script>

Answer 8

只需使用

$location.url();

而不是

$location.path();

Answer 9

如果要移至其他网址并清除查询参数，请使用：

$location.path('/my/path').search({});

Answer 10

如果您正在使用路线参数，请清除$ routeParams

$routeParams= null;

Answer 11

如何将location hash设置为null

$location.hash(null);

Answer 12

如果您立即处理参数然后转到下一页，则可以在新位置的末尾添加问号。

例如，如果你愿意的话 $ location.path（＆＃39; /下一页＆＃39）;

你可以这样做： $ location.path（＆＃39; /下一页＆＃39;？）;

Answer 13

我已经尝试了上述答案但无法让他们工作。唯一适用于我的代码是$window.location.search = ''

Answer 14

我可以用这一行替换所有查询参数：$location.search({});
易于理解和简单的方法来清除它们。

Answer 15

接受的答案对我有用，但我需要深入挖掘以解决后退按钮的问题。

我注意到如果我使用<a ui-sref="page({x: 1})">链接到某个页面，然后使用$location.search('x', null)删除查询字符串，我的浏览器历史记录中没有额外的条目，所以后退按钮带我回到我开始的地方。虽然我觉得这是错的，因为我认为Angular不会自动为我删除这个历史记录条目，这实际上是我特定用例的理想行为。

问题是，如果我使用<a href="/page/?x=1">链接到该页面，则以相同的方式删除查询字符串，我做在我的浏览器历史记录中获取额外的条目，所以我必须单击后退按钮两次才能回到我开始的位置。这是不一致的行为，但实际上这似乎更正确。

我可以使用href轻松解决$location.search('x', null).replace()链接问题，但是当您通过ui-sref链接登陆时，这会打破页面，所以这不好。

经过大量的摆弄，这就是我提出的解决方案：

在我的应用run功能中，我添加了这个：

$rootScope.$on('$locationChangeSuccess', function () {
    $rootScope.locationPath = $location.path();
});

然后我使用此代码删除查询字符串参数：

$location.search('x', null);

if ($location.path() === $rootScope.locationPath) {
    $location.replace();
}

Answer 16

对于 Angular> 2 ，您可以将null传递给所有要清除的参数

(executable (name hello-world) (flags (:standard -warn-error -24)))