如何清除URL中的查询参数?

My AngularJS application needs to have access to the user's LinkedIn profile. In order to do that I need to redirect the user to a LinkedIn URL which contains a callback redirect_uri parameter which will tell LinkedIn to redirect the user back to my webapp and include a "code" query param in the URL. It's a traditional Oauth 2.0 flow.

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

Everything works great except that LinkedIn redirects the user back to the following URL:

除了LinkedIn将用户重定向回以下URL之外，一切都很好:

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

I would like to remove ?code=XXX&state=YYY from the URL in order to make it clean. The user does not need to see the query parameters I received from LinkedIn redirect.

我想从URL中删除代码=XXX&state=YYY，以使其干净。用户不需要看到我从LinkedIn重定向收到的查询参数。

I tried $location.absUrl($location.path() + $location.hash()).replace(), but it keep the query params in the URL.

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

I am also unable to extract the query parameters, e.g. "code", using ($location.search()).code. It seems like having ? before # in the URL above is tricking Angular.

我也无法提取查询参数，例如。“代码”,使用($ location.search()).code。好像有?在上面的URL中的#是有棱角的。

15 个解决方案

#1

I use

我使用

$location.search('key', null)

As this not only deletes my key but removes it from the visibility on the URL.

因为这不仅删除了我的密钥，而且从URL的可见性中删除了它。

#2

I ended up getting the answer from AngularJS forum. See this thread for details

我最终从AngularJS论坛得到了答案。有关细节，请参见此线程

---

The link is to a Google Groups thread, which is difficult to read and doesn't provide a clear answer. To remove URL parameters use

该链接指向一个谷歌组线程，该线程很难读取，并且不能提供明确的答案。要删除URL参数，请使用

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

#3

To remove ALL query parameters, do:

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

$location.search({});

To remove ONE particular query parameter, do:

要删除一个特定的查询参数，请执行以下操作:

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

#4

To clear an item delete it and call $$compose

要清除一个项目，删除它并调用$$ composer

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

derived from angularjs source : https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

源自angularjs来源:https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8b8b8651972a1f650f6b/src/ng/location.l419 - l443

#5

You can delete a specific query parameter by using:

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

delete $location.$$search.nameOfParameter;

Or you can clear all the query params by setting search to an empty object:

或将搜索设置为空对象，清除所有查询参数:

$location.$$search = {};

#6

At the time of writing, and as previously mentioned by @Bosh, html5mode must be true in order to be able to set $location.search() and have it be reflected back into the window’s visual URL.

正如@Bosh前面提到的，在编写时，html5mode必须为true，以便能够设置$location.search()并将其反射回窗口的可视URL。

See https://github.com/angular/angular.js/issues/1521 for more info.

更多信息请参见https://github.com/angular/angular.js/issues/1521。

But if html5mode is true you can easily clear the URL’s query string with:

但是如果html5mode是正确的，您可以使用以下命令轻松清除URL的查询字符串:

$location.search('');

or

或

$location.search({});

This will also alter the window’s visual URL.

这也将改变窗口的视觉URL。

(Tested in AngularJS version 1.3.0-rc.1 with html5Mode(true).)

(在AngularJS版本1.3.0-rc中测试)。1与html5Mode(真正的))。

#7

Need to make it work when html5mode = false?

All of the other answers work only when Angular's html5mode is true. If you're working outside of html5mode, then $location refers only to the "fake" location that lives in your hash -- and so $location.search can't see/edit/fix the actual page's search params.

所有其他答案只在角线的html5模式为真时才有效。如果您在html5mode之外工作，那么$location仅指位于散列中的“伪”位置——也就是$location。搜索不能查看/编辑/修复实际页面的搜索参数。

Here's a workaround, to be inserted in the HTML of the page before angular loads:

这里有一个解决方案，在角度加载之前插入到页面的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>

#8

Just use

只使用

$location.url();

Instead of

而不是

$location.path();

#9

If you want to move to another URL and clear the query parameters just use:

如果您想移动到另一个URL并清除查询参数，请使用:

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

#10

If you are using routes parameters just clear $routeParams

如果您正在使用路由参数，只需清除$routeParams

$routeParams= null;

#11

How about just setting the location hash to null

将位置散列设置为null怎么样

$location.hash(null);

#12

if you process the parameters immediately and then move to the next page, you can put a question mark on the end of the new location.

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

for example, if you would have done $location.path('/nextPage');

例如，如果您要执行$location.path('/nextPage');

you can do this instead: $location.path('/nextPage?');

您可以这样做:$location.path('/nextPage?');

#13

I've tried the above answers but could not get them to work. The only code that worked for me was $window.location.search = ''

我试过了上面的答案，但是没有找到。唯一对我有用的代码是$ windows .location。搜索= "

#14

I can replace all query parameters with this single line: $location.search({});
Easy to understand and easy way to clear them out.

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

#15

The accepted answer worked for me, but I needed to dig a little deeper to fix the problems with the back button.

公认的答案对我起了作用，但我需要更深入地研究以修复back按钮的问题。

What I noticed is that if I link to a page using <a ui-sref="page({x: 1})">, then remove the query string using $location.search('x', null), I don't get an extra entry in my browser history, so the back button takes me back to where I started. Although I feel like this is wrong because I don't think that Angular should automatically remove this history entry for me, this is actually the desired behaviour for my particular use-case.

我注意到，如果我使用

The problem is that if I link to the page using <a href="/page/?x=1"> instead, then remove the query string in the same way, I do get an extra entry in my browser history, so I have to click the back button twice to get back to where I started. This is inconsistent behaviour, but actually this seems more correct.

问题是如果我使用，然后以同样的方式删除查询字符串，我的浏览器历史中确实有一个额外的条目，所以我必须点击后退按钮两次才能回到开始的地方。这是不一致的行为，但实际上这似乎更正确。

I can easily fix the problem with href links by using $location.search('x', null).replace(), but then this breaks the page when you land on it via a ui-sref link, so this is no good.

通过使用$location，我可以很容易地修复href链接的问题。search('x'， null).replace()，但是当您通过ui-sref链接登录页面时，这会破坏页面，所以这样做不好。

After a lot of fiddling around, this is the fix I came up with:

经过大量的摆弄之后，我想出了一个解决办法:

In my app's run function I added this:

在app的run函数中，我添加了如下内容:

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

Then I use this code to remove the query string parameter:

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

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

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