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
134
I use
我使用
$location.search('key', null)
As this not only deletes my key but removes it from the visibility on the URL.
因为这不仅删除了我的密钥,而且从URL的可见性中删除了它。
#2
97
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
51
To remove ALL query parameters, do:
要删除所有查询参数,请执行以下操作:
$location.search({});
To remove ONE particular query parameter, do:
要删除一个特定的查询参数,请执行以下操作:
$location.search('myQueryParam', null);
#4
28
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
27
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
26
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
10
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
4
Just use
只使用
$location.url();
Instead of
而不是
$location.path();
#9
2
If you want to move to another URL and clear the query parameters just use:
如果您想移动到另一个URL并清除查询参数,请使用:
$location.path('/my/path').search({});
#10
1
If you are using routes parameters just clear $routeParams
如果您正在使用路由参数,只需清除$routeParams
$routeParams= null;
#11
0
How about just setting the location hash to null
将位置散列设置为null怎么样
$location.hash(null);
#12
0
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
0
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
0
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
0
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();
}
#1
134
I use
我使用
$location.search('key', null)
As this not only deletes my key but removes it from the visibility on the URL.
因为这不仅删除了我的密钥,而且从URL的可见性中删除了它。
#2
97
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
51
To remove ALL query parameters, do:
要删除所有查询参数,请执行以下操作:
$location.search({});
To remove ONE particular query parameter, do:
要删除一个特定的查询参数,请执行以下操作:
$location.search('myQueryParam', null);
#4
28
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
27
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
26
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
10
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
4
Just use
只使用
$location.url();
Instead of
而不是
$location.path();
#9
2
If you want to move to another URL and clear the query parameters just use:
如果您想移动到另一个URL并清除查询参数,请使用:
$location.path('/my/path').search({});
#10
1
If you are using routes parameters just clear $routeParams
如果您正在使用路由参数,只需清除$routeParams
$routeParams= null;
#11
0
How about just setting the location hash to null
将位置散列设置为null怎么样
$location.hash(null);
#12
0
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
0
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
0
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
0
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();
}