AngularJS: Как очистить параметры запроса в URL?

Приложение My AngularJS должно иметь доступ к профилю пользователя LinkedIn. Для этого мне нужно перенаправить пользователя на URL LinkedIn, который содержит параметр redirect_uri обратного вызова, который сообщает LinkedIn перенаправить пользователя обратно на мой webapp и включить в URL параметр запроса "код". Это традиционный поток Oauth 2.0.

Все отлично работает, за исключением того, что LinkedIn перенаправляет пользователя на следующий URL-адрес:

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

Я хочу удалить ?code=XXX&state=YYY из URL, чтобы сделать его чистым. Пользователь не должен видеть параметры запроса, которые я получил от перенаправления LinkedIn.

Я попробовал $location.absUrl($location.path() + $location.hash()).replace(), но он сохранил параметры запроса в URL-адресе.

Я также не могу извлечь параметры запроса, например. "код", используя ($location.search()).code. Кажется, что есть? до # в приведенном выше URL-адресе используется Angular.

Ответ 1

В итоге я получил ответ от форума AngularJS. Подробнее см. этот поток


Ссылка на поток групп Google, который трудно читать и не дает четкого ответа. Чтобы удалить параметры URL, используйте

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

Ответ 2

Я использую

$location.search('key', null)

Поскольку это не только удаляет мой ключ, но и удаляет его из видимости URL.

Ответ 3

Чтобы удалить параметры запроса ВСЕ, выполните:

$location.search({});

Чтобы удалить специальный параметр запроса ОДИН, выполните следующие действия:

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

Ответ 5

Вы можете удалить определенный параметр запроса, используя:

delete $location.$$search.nameOfParameter;

Или вы можете очистить все параметры запроса, установив поиск в пустой объект:

$location.$$search = {};

Ответ 6

На момент написания и, как ранее упоминалось @Bosh, html5mode должно быть true, чтобы иметь возможность устанавливать $location.search() и отображать его обратно в визуальный URL-адрес окна.

Подробнее см. https://github.com/ angular/angular.js/issues/1521.

Но , если html5mode есть true, вы можете легко очистить строку запроса URL-адресов с помощью

$location.search('');

или

$location.search({});

Это также изменит визуальный URL окна.

(Протестировано в версии AngularJS 1.3.0-rc.1 с помощью html5Mode(true).)

Ответ 7

Необходимо заставить его работать, когда html5mode= false?

Все остальные ответы работают только тогда, когда Angular html5mode есть true. Если вы работаете вне html5mode, то $location относится только к "поддельному" местоположению, которое живет в вашем хэше, и поэтому $location.search не может видеть/редактировать/исправлять фактические параметры поиска страницы.

Здесь обходной путь, который будет вставлен в HTML страницы до Angular, загружается:

<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

Просто используйте

$location.url();

Вместо

$location.path();

Ответ 9

Если вы хотите перейти на другой URL-адрес и очистить параметры запроса, просто используйте:

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

Ответ 10

Если вы используете параметры маршрута, просто очистите $routeParams

$routeParams= null;

Ответ 11

Как просто установить хэш местоположения на нуль

$location.hash(null);

Ответ 12

если вы немедленно обработаете параметры и перейдете на следующую страницу, вы можете поместить знак вопроса в конец нового местоположения.

например, если бы вы сделали $ Location.path( '/СледующаяСтраница');

вы можете сделать это вместо этого: $ Location.path( '/СледующаяСтраница?');

Ответ 13

Я пробовал вышеупомянутые ответы, но не мог заставить их работать. Единственный код, который работал у меня, был $window.location.search = ''

Ответ 14

Я могу заменить все параметры запроса этой единственной строкой: $location.search({});
Легкий для понимания и простой способ их устранения.

Ответ 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, поэтому это нехорошо.

После долгих разворачиваний, это исправление, которое я придумал:

В моей функции app run я добавил следующее:

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

Затем я использую этот код для удаления параметра строки запроса:

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

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

Ответ 16

Для Angular> 2, вы можете передать null всем параметрам, которые хотите очистить

this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})