AngularJS: วิธีล้างพารามิเตอร์การสืบค้นใน URL

แอปพลิเคชัน My AngularJS จำเป็นต้องเข้าถึงโปรไฟล์ LinkedIn ของผู้ใช้ ในการทำเช่นนั้นฉันจำเป็นต้องเปลี่ยนเส้นทางผู้ใช้ไปยัง LinkedIn URL ซึ่งมีพารามิเตอร์ callback redirect_uri ซึ่งจะบอก LinkedIn ให้เปลี่ยนเส้นทางผู้ใช้กลับไปที่ webapp ของฉันและรวมพารามิเตอร์การสืบค้น "code" ไว้ใน 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()แต่มันเก็บ params แบบสอบถามไว้ใน URL

นอกจากนี้ผมยังไม่สามารถที่จะดึงพารามิเตอร์การค้นหาเช่น "รหัส" ($location.search()).codeโดยใช้ ดูเหมือนว่าจะมี? ก่อนหน้า # ใน URL ข้างต้นกำลังหลอกล่อเชิงมุม

ฉันใช้

$location.search('key', null)

เช่นนี้ไม่เพียง แต่ลบคีย์ของฉัน แต่ลบออกจากการแสดงผลบน URL

ฉันได้รับคำตอบจากฟอรัม AngularJS ดูกระทู้นี้สำหรับรายละเอียด

ลิงค์ไปยังเธรด Google Groups ซึ่งอ่านยากและไม่มีคำตอบที่ชัดเจน ในการลบพารามิเตอร์ URL ให้ใช้

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

หากต้องการลบพารามิเตอร์ข้อความค้นหาทั้งหมดให้ทำ:

$location.search({});

ในการลบONEพารามิเตอร์การค้นหาโดยเฉพาะอย่างยิ่งต้องทำ:

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

หากต้องการล้างรายการให้ลบออกและเรียกการเขียน $$

    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?

คำตอบอื่น ๆ ทั้งหมดใช้ได้เฉพาะเมื่อ 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>

เพียงแค่ใช้

$location.url();

แทน

$location.path();

หากคุณต้องการย้ายไปยัง URL อื่นและล้างพารามิเตอร์การสืบค้นให้ใช้:

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

หากคุณกำลังใช้พารามิเตอร์เส้นทางเพียงแค่ล้าง $ routeParams

$routeParams= null;

เพียงแค่ตั้งค่าแฮชตำแหน่งเป็น 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}})