AngularJS: Làm cách nào để xóa tham số truy vấn trong URL?

Ứng dụng AngularJS của tôi cần có quyền truy cập vào hồ sơ LinkedIn của người dùng. Để thực hiện điều đó, tôi cần chuyển hướng người dùng đến URL LinkedIn có chứa tham số redirect_uri gọi lại để thông báo cho LinkedIn chuyển hướng người dùng trở lại ứng dụng web của tôi và bao gồm thông số truy vấn "mã" trong URL. Đó là dòng chảy Oauth 2.0 truyền thống.

Mọi thứ hoạt động tuyệt vời ngoại trừ việc LinkedIn chuyển hướng người dùng quay lại URL sau:

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

Tôi muốn xóa ?code=XXX&state=YYYkhỏi URL để làm cho nó sạch sẽ. Người dùng không cần phải xem các tham số truy vấn tôi nhận được từ chuyển hướng LinkedIn.

Tôi đã thử $location.absUrl($location.path() + $location.hash()).replace(), nhưng nó giữ các thông số truy vấn trong URL.

Tôi cũng không thể trích xuất các tham số truy vấn, ví dụ: "mã", bằng cách sử dụng ($location.search()).code. Có vẻ như có? trước # trong URL ở trên là đánh lừa Angular.

tôi sử dụng

$location.search('key', null)

Vì điều này không chỉ xóa khóa của tôi mà còn xóa nó khỏi khả năng hiển thị trên URL.

Tôi cuối cùng đã nhận được câu trả lời từ diễn đàn AngularJS. Xem chủ đề này để biết chi tiết

Liên kết là một chuỗi Google Groups, rất khó đọc và không cung cấp câu trả lời rõ ràng. Để xóa tham số URL, hãy sử dụng

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

Để xóa TẤT CẢ các tham số truy vấn, hãy làm:

$location.search({});

Để xóa MỘT tham số truy vấn cụ thể, hãy làm:

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

Để xóa một mục xóa nó và gọi $$ soạn

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

có nguồn gốc từ nguồn angularjs: https://github.com/angular/angular.js/blob/c77b2bcca36cf199478b8fb651972a1f650f646b/src/ng/location.js#L419-L443

Bạn có thể xóa một tham số truy vấn cụ thể bằng cách sử dụng:

delete $location.$$search.nameOfParameter;

Hoặc bạn có thể xóa tất cả các tham số truy vấn bằng cách đặt tìm kiếm vào một đối tượng trống:

$location.$$search = {};

Tại thời điểm viết và như được đề cập trước đây bởi @Bosh, html5modephải truecó thể đặt $location.search()và được phản ánh lại vào URL trực quan của cửa sổ.

Xem https://github.com/angular/angular.js/issues/1521 để biết thêm thông tin.

Nhưng nếu html5mode làtrue bạn có thể dễ dàng xóa chuỗi truy vấn của URL bằng:

$location.search('');

hoặc là

$location.search({});

Điều này cũng sẽ thay đổi URL hình ảnh của cửa sổ.

(Đã thử nghiệm trong phiên bản AngularJS 1.3.0-rc.1với html5Mode(true).)

Cần làm cho nó hoạt động khi html5mode= false?

Tất cả các câu trả lời khác chỉ làm việc khi góc của html5modelà true. Nếu bạn đang làm việc bên ngoài html5mode, thì $locationchỉ đề cập đến vị trí "giả" sống trong hàm băm của bạn - và vì vậy $location.searchkhông thể xem / chỉnh sửa / sửa các thông số tìm kiếm của trang thực tế.

Đây là một cách giải quyết, được chèn vào HTML của trang trước khi tải các góc:

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

Chỉ dùng

$location.url();

Thay vì

$location.path();

Nếu bạn muốn chuyển sang một URL khác và xóa các tham số truy vấn, chỉ cần sử dụng:

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

Nếu bạn đang sử dụng tham số tuyến đường, chỉ cần xóa $ routeParams

$routeParams= null;

Làm thế nào về việc chỉ cần đặt băm vị trí thành null

$location.hash(null);

nếu bạn xử lý các tham số ngay lập tức và sau đó chuyển sang trang tiếp theo, bạn có thể đặt dấu chấm hỏi ở cuối vị trí mới.

ví dụ: nếu bạn đã thực hiện $ location.path ('/ nextPage');

thay vào đó, bạn có thể làm điều này: $ location.path ('/ nextPage?');

Tôi đã thử các câu trả lời trên nhưng không thể làm cho chúng hoạt động. Mã duy nhất làm việc cho tôi là$window.location.search = ''

Tôi có thể thay thế tất cả các tham số truy vấn bằng dòng đơn này: Cách $location.search({});
dễ hiểu và dễ dàng để xóa chúng.

Câu trả lời được chấp nhận làm việc cho tôi, nhưng tôi cần đào sâu hơn một chút để khắc phục các vấn đề với nút quay lại.

Điều tôi nhận thấy là nếu tôi liên kết đến một trang bằng cách sử dụng <a ui-sref="page({x: 1})">, sau đó xóa chuỗi truy vấn bằng cách sử dụng $location.search('x', null), tôi không nhận được một mục nhập thêm trong lịch sử trình duyệt của mình, vì vậy nút quay lại đưa tôi trở lại nơi tôi bắt đầu. Mặc dù tôi cảm thấy như vậy là sai vì tôi không nghĩ rằng Angular sẽ tự động xóa mục lịch sử này cho tôi, đây thực sự là hành vi mong muốn cho trường hợp sử dụng cụ thể của tôi.

Vấn đề là nếu tôi liên kết đến trang sử dụng <a href="https://stackoverflow.com/page/?x=1">thay vào đó, sau đó loại bỏ các chuỗi truy vấn trong cùng một cách, tôi làm được một mục thêm trong lịch sử trình duyệt của tôi, vì vậy tôi phải nhấp vào nút quay lại hai lần để có được trở lại nơi tôi bắt đầu . Đây là hành vi không nhất quán, nhưng thực sự điều này có vẻ đúng hơn.

Tôi có thể dễ dàng khắc phục sự cố với hrefcác liên kết bằng cách sử dụng $location.search('x', null).replace(), nhưng sau đó điều này sẽ phá vỡ trang khi bạn truy cập vào nó thông qua một ui-srefliên kết, vì vậy điều này là không tốt.

Sau rất nhiều lần nghịch ngợm, đây là cách khắc phục tôi đã nghĩ ra:

Trong runchức năng của ứng dụng, tôi đã thêm cái này:

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

Sau đó, tôi sử dụng mã này để loại bỏ tham số chuỗi truy vấn:

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

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

Đối với Angular> 2 , Bạn có thể truyền null cho tất cả các thông số bạn muốn xóa

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