ตัวป้องกันการนำทาง
ปกป้องเส้นทางและเรียกใช้ตรรกะระหว่างการนำทางด้วยตัวป้องกัน
ตัวป้องกันการนำทาง เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
ตัวป้องกันการนำทางคืออะไร
ตัวป้องกันการนำทางช่วยให้คุณเรียกใช้โค้ดก่อน ระหว่าง หรือหลังการเปลี่ยนเส้นทาง
- บล็อกหรือเปลี่ยนเส้นทางการนำทาง
- ตรวจสอบการยืนยันตัวตน
- ยืนยันก่อนออกจากหน้า
ประเภทของตัวป้องกัน
ตัวป้องกันมีอยู่สามระดับ
- ตัวป้องกันส่วนกลางทำงานกับการนำทางทุกครั้ง
- ตัวป้องกันรายเส้นทางทำงานกับเส้นทางใดเส้นทางหนึ่งโดยเฉพาะ
- ตัวป้องกันภายในคอมโพเนนต์ทำงานอยู่ภายในคอมโพเนนต์
ตัวป้องกันส่วนกลาง beforeEach
router.beforeEachทำงานก่อนการนำทางทุกครั้ง โดยได้รับเส้นทางเป้าหมายและเส้นทางปัจจุบัน
router.beforeEach((to, from) => {
console.log("going to", to.path)
// return true to allow,
// or a route to redirect
})การอนุญาตหรือเปลี่ยนเส้นทาง
ใน Vue Router 4 ให้ส่งค่ากลับเพื่อควบคุมลำดับการทำงาน
- ส่งกลับ true หรือไม่ส่งค่าใด ๆ เพื่ออนุญาต
- ส่งกลับ false เพื่อยกเลิก
- ส่งกลับตำแหน่งของเส้นทางเพื่อเปลี่ยนเส้นทาง
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isLoggedIn()) {
return { name: "login" }
}
return true
})ฟิลด์ข้อมูลกำกับเส้นทาง
แนบข้อมูลกำกับแบบกำหนดเองให้กับเส้นทาง เช่น requiresAuth แล้วอ่านข้อมูลนั้นในตัวป้องกัน
const routes = [
{
path: "/dashboard",
component: Dashboard,
meta: { requiresAuth: true }
}
]ตัวป้องกันการยืนยันตัวตน
รูปแบบที่ใช้กันทั่วไปคือ ป้องกันเส้นทางด้วยการตรวจสอบการยืนยันตัวตนในตัวป้องกันส่วนกลาง
router.beforeEach((to) => {
const authed = localStorage.getItem("token")
if (to.meta.requiresAuth && !authed) {
return { name: "login", query: { redirect: to.fullPath } }
}
})beforeEnter รายเส้นทาง
beforeEnterทำหน้าที่ป้องกันเส้นทางเดียวโดยตรงภายในคำจำกัดความของเส้นทางนั้น
const routes = [
{
path: "/admin",
component: Admin,
beforeEnter: (to, from) => {
return isAdmin() ? true : { name: "home" }
}
}
]ตัวป้องกันภายในคอมโพเนนต์
คอมโพเนนต์สามารถกำหนดตัวป้องกันของตนเองได้ โดย onBeforeRouteLeaveจะทำงานเมื่อนำทางออกจากหน้า
import { onBeforeRouteLeave } from "vue-router"
onBeforeRouteLeave((to, from) => {
if (hasUnsavedChanges.value) {
return window.confirm("Leave without saving?")
}
})onBeforeRouteUpdate
onBeforeRouteUpdateจะทำงานเมื่อเส้นทางเปลี่ยนแปลง แต่ยังนำคอมโพเนนต์เดิมกลับมาใช้ซ้ำ เช่น เมื่อพารามิเตอร์เปลี่ยน
import { onBeforeRouteUpdate } from "vue-router"
onBeforeRouteUpdate((to) => {
loadUser(to.params.id)
})ฟังก์ชันเรียกกลับ next (รูปแบบดั้งเดิม)
โค้ดรุ่นเก่าใช้อาร์กิวเมนต์ตัวที่สาม คือ next เพื่อควบคุมการนำทาง ปัจจุบันแนะนำให้ส่งค่ากลับแทน
// Classic style with next()
router.beforeEach((to, from, next) => {
if (canAccess(to)) {
next() // proceed
} else {
next("/login") // redirect
}
})ค่าที่ส่งกลับกับ next()
มีสองรูปแบบที่ให้ผลลัพธ์เหมือนกัน
- ส่งค่ากลับ (รูปแบบใหม่และกระชับกว่า) ได้แก่ true, false หรือตำแหน่ง
- เรียก next() (รูปแบบดั้งเดิม) เพื่อดำเนินการต่อหรือเปลี่ยนเส้นทาง
อย่าใช้ทั้งสองรูปแบบในตัวป้องกันเดียวกัน แนะนำให้ใช้รูปแบบส่งค่ากลับกับโค้ดใหม่
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับตัวป้องกันการนำทาง
ทบทวน: ตัวป้องกันการนำทาง
คุณได้เรียนรู้วิธีควบคุมการนำทางแล้ว
- ตัวป้องกันส่วนกลาง beforeEachทำงานกับทุกเส้นทาง
- ส่งกลับ true เพื่ออนุญาต false เพื่อยกเลิก หรือตำแหน่งเพื่อเปลี่ยนเส้นทาง
- ฟิลด์ข้อมูลกำกับ เช่น requiresAuth ใช้กำหนดการตรวจสอบการยืนยันตัวตน
- beforeEnterทำหน้าที่ป้องกันเส้นทางเดียว
- ตัวป้องกันภายในคอมโพเนนต์ เช่น onBeforeRouteLeave จัดการการออกจากหน้า
คุณเรียนจบหลักสูตร Vue.js พื้นฐานแล้ว
คำถามที่พบบ่อย
บทเรียน “ตัวป้องกันการนำทาง” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ตัวป้องกันการนำทาง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ตัวป้องกันการนำทาง”
ปกป้องเส้นทางและเรียกใช้ตรรกะระหว่างการนำทางด้วยตัวป้องกัน คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “ตัวป้องกันการนำทาง” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า Vue Router
- เส้นทางซ้อนและเส้นทางแบบไดนามิก
- ตัวป้องกันการนำทาง