รีแอคได้เยี่ยมมาก! เราเตอร์ React ติดตั้งได้ง่ายสำหรับการกำหนดเส้นทางพื้นฐาน แต่สำหรับการใช้งานจริง มันไม่ใช่เส้นทาง /home, /nav, /login ทั่วไป ไม่ใช่เหรอ? เส้นทางเป็นเกตเวย์ทางเข้าและเกตเวย์จำเป็นต้องมีการป้องกันตามวัตถุประสงค์
หนึ่งในคำถามทั่วไปที่ถูกถามในการกำหนดเส้นทางบนสแต็กโอเวอร์โฟลว์ที่ฉันสังเกตเห็นในปัจจุบันคือเกี่ยวกับราวกั้นของการกำหนดเส้นทาง เรามาเจาะลึกถึงการใช้งานที่ง่ายและรวดเร็วกันดีกว่า
สมมติว่าฉันต้องสร้างโฮมเพจสำหรับ Dummy Book ของฉัน (ฉันหวังว่าคุณจะยกโทษให้กับการฆาตกรรม UX สำหรับตัวอย่างนี้ RIP!) ฉันไม่ต้องการให้เพจของฉันเปลี่ยนเส้นทางไปยังหน้าโปรไฟล์เว้นแต่ฉันจะเข้าสู่ระบบ ฉันจะทำเช่นนั้นได้อย่างไร?
มาดูแอปของเราที่มีตัวเลือกการเข้าสู่ระบบและออกจากระบบที่จำลองโดยการอัปเดตสถานะเพียงอย่างเดียว
โปรดสังเกต AuthenticationContext ที่เก็บสถานะการตรวจสอบสิทธิ์ ขณะนี้ โปรไฟล์ถูกเปิดเผยโดยไม่คำนึงถึงสถานะการตรวจสอบสิทธิ์ ในกรณีนี้ โดยไม่ต้องคลิกปุ่มเข้าสู่ระบบ
เราจะป้องกันเส้นทางนั้นได้อย่างไร? Wrapper แบบธรรมดาควรทำ เพื่อยืนยันการตรวจสอบสิทธิ์ที่ส่งคืนเราเตอร์หรือการเปลี่ยนเส้นทาง (auth-route.js ด้านล่าง)
ตอนนี้สิ่งที่คุณต้องทำคือแทนที่ เส้นทาง ของโปรไฟล์ด้วย AuthenticatedRoute ที่สร้างขึ้นใหม่ของเรา พวกเขาใช้เสาเดียวกันกับเส้นทาง และหากไม่ผ่านการตรวจสอบสิทธิ์ คุณจะถูกเปลี่ยนเส้นทางไปยังหน้าแรก นั่นคือทั้งหมดที่คุณต้องการ แน่นอนว่าการตรวจสอบการรับรองความถูกต้องนั้นไม่สามารถเป็นการตรวจสอบสถานะได้ แต่สามารถแทนที่ด้วยกลไกการรับรองความถูกต้องของคุณได้ ขณะนี้มีราวกั้น ตอนนี้ควรนำคุณไปยังหน้าโปรไฟล์ของหนังสือจำลองหากเข้าสู่ระบบแล้ว
หากคุณต้องการดูตัวอย่างเชิงโต้ตอบ ฉันมีตัวอย่างหนึ่งใน final-code(codesandbox) พร้อมด้วย UI ที่สวยงาม ;)
