AngularJS: Как очистить параметры запроса в URL?
Мое приложение AngularJS должно иметь доступ к профилю пользователя LinkedIn. Для этого мне нужно перенаправить пользователя на URL-адрес LinkedIn, который содержит параметр обратного вызова redirect_uri, который сообщит LinkedIn о перенаправлении пользователя обратно в мое веб-приложение и включит параметр URL-кода в 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.
15 ответов
Я получил ответ на форуме AngularJS. Смотрите эту тему для деталей
Ссылка на ветку групп Google, которая трудна для чтения и не дает четкого ответа. Чтобы удалить параметры URL, используйте
$location.url($location.path());
Я использую
$location.search('key', null)
Так как это не только удаляет мой ключ, но и удаляет его из видимости на URL.
Чтобы удалить ВСЕ параметры запроса, выполните:
$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
На момент написания и, как уже упоминалось, @Bosh, html5mode должно быть true для того, чтобы иметь возможность установить $location.search() и чтобы это было отражено обратно в визуальный URL окна.
См. http://github.com/angular/angular.js/issues/1521 для получения дополнительной информации.
Но если html5mode являетсяtrue Вы можете легко очистить строку запроса URL с помощью:
$location.search('');
или же
$location.search({});
Это также изменит визуальный URL окна.
(Проверено в версии AngularJS 1.3.0-rc.1 с html5Mode(true).)
Вы можете удалить определенный параметр запроса, используя:
delete $location.$$search.nameOfParameter;
Или вы можете очистить все параметры запроса, установив поиск для пустого объекта:
$location.$$search = {};
Нужно заставить его работать, когда html5mode знак равно false?
Все остальные ответы работают только когда Angular's 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>
Если вы хотите перейти на другой URL и очистить параметры запроса, просто используйте:
$location.path('/my/path').search({});
Как насчет просто установить хэш местоположения в нуль
$location.hash(null);
Если вы используете параметры маршрутов, просто очистите $routeParams
$routeParams= null;
Если вы немедленно обработаете параметры и затем перейдете на следующую страницу, вы можете поставить знак вопроса в конце нового местоположения.
например, если бы вы сделали $location.path('/nextPage');
вместо этого вы можете сделать это: $location.path('/nextPage?');
Принятый ответ сработал для меня, но мне нужно было покопаться немного глубже, чтобы исправить проблемы с кнопкой возврата.
Что я заметил, так это то, что если я ссылаюсь на страницу, используя <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();
}
Я попробовал вышеуказанные ответы, но не смог заставить их работать. Единственный код, который работал для меня, был $window.location.search = ''
Для Angular >2 вы можете передать значение null всем параметрам, которые хотите очистить.
this.router.navigate(['/yourRoute'], {queryParams:{params1: null, param2: null}})
Я могу заменить все параметры запроса одной строкой: $location.search({});
Легко понять и легко очистить их.