ฟิลด์เมทาของเส้นทางและการกำหนดชนิด
meta: { requiresAuth: true } การรวมคำประกาศ TypeScript เพื่อกำหนดชนิดให้เมทา
ฟิลด์เมทาของเส้นทางและการกำหนดชนิด เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
ฟิลด์เมตาของเส้นทางคืออะไร
ทุกเส้นทางสามารถมีออบเจ็กต์ เมตา ซึ่งเป็นข้อมูลใด ๆ ที่แนบไว้กับเส้นทางได้ เหมาะอย่างยิ่งสำหรับแฟล็กต่าง ๆ เช่น ข้อกำหนดด้านการยืนยันตัวตน บทบาทที่อนุญาต ชื่อหน้า หรือการเลือกเลย์เอาต์
การเพิ่มเมตาให้เส้นทาง
กำหนดคีย์ meta ในระเบียนเส้นทาง ค่าต่าง ๆ ขึ้นอยู่กับคุณทั้งหมด
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]การอ่านเมตาในตัวป้องกันการนำทาง
การใช้งานที่พบบ่อยที่สุดคือใช้ในตัวป้องกันการนำทาง router.beforeEach จะทำงานก่อนการนำทางทุกครั้ง และได้รับเส้นทางเป้าหมายซึ่งคุณสามารถตรวจสอบ meta ได้
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})การเปลี่ยนเส้นทางผู้ใช้ที่ยังไม่ได้ยืนยันตัวตน
ส่งคืนตำแหน่งของเส้นทางจากตัวป้องกันเพื่อเปลี่ยนเส้นทาง หากส่งคืน false จะยกเลิกการนำทาง หากไม่ส่งคืนค่าใด ๆ หรือส่งคืน true จะอนุญาตให้ดำเนินการต่อ
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})การควบคุมการเข้าถึงตามบทบาท
ใช้ฟิลด์เมตา roles ร่วมกับบทบาทของผู้ใช้ปัจจุบัน เพื่อควบคุมการเข้าถึงหน้าต่าง ๆ ตามสิทธิ์
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})เมตาถูกรวมมาจากเส้นทางแม่
เส้นทางที่ซ้อนกันจะสืบทอดเมตาจากเส้นทางแม่ผ่าน to.meta ซึ่งรวมระเบียนที่จับคู่ทั้งหมดเข้าด้วยกัน เส้นทางลูกจะมองเห็นเมตาของเส้นทางแม่ เว้นแต่จะเขียนทับคีย์เดียวกัน
ปัญหาด้านชนิดข้อมูล
ตามค่าเริ่มต้น TypeScript กำหนดชนิดของ meta เป็นออบเจ็กต์ว่าง ดังนั้น to.meta.requiresAuth จึงทำให้เกิดข้อผิดพลาด คุณแก้ไขได้ด้วยการรวมการประกาศเข้ากับชนิดข้อมูลของ Vue Router
การประกาศเมตาที่มีชนิดข้อมูล
เพิ่มข้อมูลให้กับอินเทอร์เฟซ RouteMeta จาก vue-router วางโค้ดนี้ไว้ในไฟล์ .d.ts หรือโมดูลใด ๆ ที่มี export {}
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}ตอนนี้เมตาจะถูกตรวจสอบชนิดข้อมูล
หลังจากเพิ่มข้อมูลแล้ว คอมไพเลอร์จะทราบโครงสร้างของ meta ข้อผิดพลาดในการพิมพ์ เช่น requireAuth จะถูกตรวจจับ และระบบเติมโค้ดอัตโนมัติจะทำงาน
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})การใช้เมตาในคอมโพเนนต์
ภายในคอมโพเนนต์ คุณสามารถอ่านเมตาของเส้นทางปัจจุบันผ่าน useRoute() ได้ และเมตานี้จะมีชนิดข้อมูลด้วยเช่นกันเนื่องจากการเพิ่มข้อมูล
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthการใช้เมตาสำหรับชื่อหน้า
รูปแบบที่ใช้กันทั่วไปคือ เก็บ title ไว้ในเมตา แล้วกำหนดค่า document.title จากตัวป้องกันส่วนกลาง
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความรู้เกี่ยวกับเมตาของเส้นทางและการกำหนดชนิดข้อมูล
บทสรุป
ฟิลด์เมตาของเส้นทางใช้เก็บข้อมูลเฉพาะของแต่ละเส้นทาง
- กำหนดเมตาในระเบียนเส้นทาง เช่น requiresAuth, roles และ title
- อ่านค่าใน router.beforeEach เพื่อควบคุมการนำทาง
- เมตาจะถูกรวมจากเส้นทางแม่ไปยังเส้นทางลูก
- กำหนดชนิดข้อมูลด้วยการรวมการประกาศบน RouteMeta จาก vue-router
คำถามที่พบบ่อย
บทเรียน “ฟิลด์เมทาของเส้นทางและการกำหนดชนิด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ฟิลด์เมทาของเส้นทางและการกำหนดชนิด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ฟิลด์เมทาของเส้นทางและการกำหนดชนิด”
meta: { requiresAuth: true } การรวมคำประกาศ TypeScript เพื่อกำหนดชนิดให้เมทา คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “ฟิลด์เมทาของเส้นทางและการกำหนดชนิด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม
ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ฟิลด์เมทาของเส้นทางและการกำหนดชนิด
- การเปลี่ยนเส้นทางและแอนิเมชัน
- การกำหนดค่าพฤติกรรมการเลื่อน
- การนำทางด้วยโปรแกรมและ useRouter