AngularJS: Bagaimana cara menghapus parameter kueri di URL?

Aplikasi AngularJS saya harus memiliki akses ke profil LinkedIn pengguna. Untuk melakukannya, saya perlu mengarahkan pengguna ke URL LinkedIn yang berisi parameter callback redirect_uri yang akan memberi tahu LinkedIn untuk mengarahkan kembali pengguna ke aplikasi web saya dan menyertakan parameter kueri "kode" di URL. Ini adalah aliran Oauth 2.0 tradisional.

Semuanya bekerja dengan baik kecuali LinkedIn mengarahkan kembali pengguna ke URL berikut:

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

Saya ingin menghapus ?code=XXX&state=YYYdari URL untuk membuatnya bersih. Pengguna tidak perlu melihat parameter kueri yang saya terima dari pengalihan LinkedIn.

Saya mencoba $location.absUrl($location.path() + $location.hash()).replace(), tetapi parameter kueri tetap di URL.

Saya juga tidak dapat mengekstrak parameter kueri, misalnya "kode", menggunakan ($location.search()).code. Sepertinya memiliki? sebelum # di URL di atas menipu Angular.

saya menggunakan

$location.search('key', null)

Karena ini tidak hanya menghapus kunci saya tetapi juga menghapusnya dari visibilitas di URL.

Saya akhirnya mendapatkan jawaban dari forum AngularJS. Lihat utas ini untuk detailnya

Tautannya menuju utas Google Grup, yang sulit dibaca dan tidak memberikan jawaban yang jelas. Untuk menghapus parameter URL, gunakan

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

Untuk menghapus SEMUA parameter kueri, lakukan:

$location.search({});

Untuk menghapus SATU parameter kueri tertentu, lakukan:

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

Untuk menghapus item, hapus dan panggil $$ compose

    if ($location.$$search.yourKey) {
        delete $location.$$search.yourKey;
        $location.$$compose();
    }

berasal dari sumber angularjs: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Anda dapat menghapus parameter kueri tertentu dengan menggunakan:

delete $location.$$search.nameOfParameter;

Atau Anda dapat menghapus semua parameter kueri dengan menyetel pencarian ke objek kosong:

$location.$$search = {};

Pada saat penulisan, dan seperti yang disebutkan sebelumnya oleh @Bosh, html5modeharus truedapat mengatur $location.search()dan memantulkannya kembali ke URL visual jendela.

Lihat https://github.com/angular/angular.js/issues/1521 untuk info lebih lanjut.

Tapi jika html5mode initrue Anda dapat dengan mudah menghapus query string URL dengan:

$location.search('');

atau

$location.search({});

Ini juga akan mengubah URL visual jendela.

(Diuji dalam versi AngularJS 1.3.0-rc.1dengan html5Mode(true).)

Perlu membuatnya bekerja ketika html5mode= false?

Semua jawaban yang lain bekerja hanya ketika sudut ini html5modeadalah true. Jika Anda bekerja di luar html5mode, maka $locationhanya merujuk ke lokasi "palsu" yang ada di hash Anda - sehingga $location.searchtidak dapat melihat / mengedit / memperbaiki parameter penelusuran halaman yang sebenarnya.

Berikut solusinya, untuk disisipkan dalam HTML halaman sebelum pemuatan sudut:

<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>

Gunakan saja

$location.url();

Dari pada

$location.path();

Jika Anda ingin pindah ke URL lain dan menghapus parameter kueri, cukup gunakan:

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

Jika Anda menggunakan parameter routes, cukup hapus $ routeParams

$routeParams= null;

Bagaimana kalau hanya mengatur hash lokasi ke null

$location.hash(null);

jika Anda memproses parameter dengan segera dan kemudian pindah ke halaman berikutnya, Anda dapat meletakkan tanda tanya di akhir lokasi baru.

misalnya, jika Anda telah melakukan $ location.path ('/ nextPage');

Anda dapat melakukan ini sebagai gantinya: $ location.path ('/ nextPage?');

Saya sudah mencoba jawaban di atas tetapi tidak bisa membuatnya berfungsi. Satu-satunya kode yang berhasil untuk saya adalah$window.location.search = ''

Saya dapat mengganti semua parameter kueri dengan satu baris ini: $location.search({});
Mudah dipahami dan cara mudah untuk menghapusnya.

Jawaban yang diterima berhasil untuk saya, tetapi saya perlu menggali lebih dalam untuk memperbaiki masalah dengan tombol kembali.

Apa yang saya perhatikan adalah jika saya menautkan ke halaman menggunakan <a ui-sref="page({x: 1})">, kemudian menghapus string kueri menggunakan $location.search('x', null), saya tidak mendapatkan entri tambahan di riwayat browser saya, sehingga tombol kembali membawa saya kembali ke tempat saya memulai. Meskipun menurut saya ini salah karena menurut saya Angular tidak secara otomatis menghapus entri riwayat ini untuk saya, sebenarnya ini adalah perilaku yang diinginkan untuk kasus penggunaan tertentu saya.

Masalahnya adalah bahwa jika saya link ke halaman menggunakan <a href="https://stackoverflow.com/page/?x=1">gantinya, kemudian menghapus string dengan cara yang sama, saya lakukan mendapatkan sebuah entri ekstra dalam sejarah browser saya, jadi saya harus mengklik tombol kembali dua kali untuk kembali ke tempat saya mulai . Ini adalah perilaku yang tidak konsisten, tetapi sebenarnya ini tampaknya lebih tepat.

Saya dapat dengan mudah memperbaiki masalah dengan hreftautan dengan menggunakan $location.search('x', null).replace(), tetapi kemudian ini merusak halaman saat Anda mendarat di atasnya melalui ui-sreftautan, jadi ini tidak baik.

Setelah banyak mengotak-atik, inilah perbaikan yang saya dapatkan:

Dalam runfungsi aplikasi saya, saya menambahkan ini:

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

Lalu saya menggunakan kode ini untuk menghapus parameter string kueri:

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

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

Untuk Angular> 2 , Anda dapat mengirimkan null ke semua parameter yang ingin Anda hapus

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