AngularJS: Як очистити параметри запиту в URL?

Мій додаток AngularJS повинен мати доступ до профілю LinkedIn користувача. Для цього мені потрібно перенаправити користувача на URL LinkedIn, який містить параметр redirect_uri зворотного виклику, який скаже LinkedIn перенаправити користувача до мого веб-сайту і включить у URL-адресу параметр запиту "код". Це традиційний потік Oauth 2.0.

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

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

Я хотів би видалити ?code=XXX&state=YYYURL-адресу, щоб зробити її чистою. Користувачеві не потрібно бачити параметри запиту, отримані від переадресації LinkedIn.

Я намагався $location.absUrl($location.path() + $location.hash()).replace(), але він зберігає параметри запиту в URL-адресі.

Я також не можу витягти параметри запиту, наприклад "код", використовуючи ($location.search()).code. Здається, що мати? перед # у вказаній вище URL-адресі відмічається кутовий.

я використовую

$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/isissue/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();
}

Для кутових> 2 ви можете передати нуль всім парам, які потрібно очистити

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