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

Мое приложение AngularJS должно иметь доступ к профилю пользователя LinkedIn. Чтобы сделать это, мне нужно перенаправить пользователя на URL-адрес LinkedIn, который содержит параметр обратного вызова redirect_uri, который сообщит LinkedIn о перенаправлении пользователя обратно в мое веб-приложение и включит в URL параметр запроса «code». Это традиционный поток 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.

я использую

$location.search('key', null)

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

Я получил ответ на форуме AngularJS. Смотрите эту тему для деталей

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

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

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

$location.search({});

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

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

Чтобы очистить элемент, удалите его и вызовите $$ compose

    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

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

delete $location.$$search.nameOfParameter;

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

$location.$$search = {};

На момент написания, как ранее упоминалось @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).)

Нужно заставить его работать когда html5mode= false?

Все остальные ответы работают только тогда , когда Угловая - х html5modeэто true. Если вы работаете вне html5mode, то $locationотносится только к «поддельному» местоположению, которое находится в вашем хэше - и поэтому $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>

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

$location.url();

Вместо того

$location.path();

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

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

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

$routeParams= null;

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

$location.hash(null);

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

например, если бы вы сделали $ location.path ('/ nextPage');

вместо этого вы можете сделать это: $ location.path ('/ nextPage?');

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

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

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

Что я заметил, так это то, что если я ссылаюсь на страницу с помощью <a ui-sref="page({x: 1})">, а затем удаляю строку запроса с помощью $location.search('x', null), я не получаю дополнительной записи в истории браузера, поэтому кнопка «Назад» возвращает меня туда, откуда я начал. Хотя я чувствую, что это неправильно, потому что я не думаю, что Angular должен автоматически удалить эту запись истории для меня, это фактически желаемое поведение для моего конкретного варианта использования.

Проблема заключается в том, что если я ссылку на страницу , используя <a href="https://stackoverflow.com/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();
}

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

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