在Vue中,路由守衛是一種可以保護你的應用程序導航不受非法訪問和攻擊的安全機制。Vue Router提供了許多不同類型的路由守衛,以滿足不同的需求。
路由守衛主要分為全局守衛、路由獨享守衛和組件守衛三種類型。 全局守衛會在每個路由導航之前調用,是最常用的一種守衛。路由獨享守衛在某個路由配置中被單獨定義。組件守衛在進入/離開組件時被調用,可以用于管理組件的生命周期。
// 全局守衛 router.beforeEach((to, from, next) =>{ // 判斷用戶是否登錄 if (to.path === '/login') { next() } else { const token = localStorage.getItem('token') if (!token) { next('/login') } else { next() } } }) // 路由獨享守衛 { path: '/user/:id', component: User, beforeEnter: (to, from, next) =>{ // 判斷用戶是否有權限 if (hasPermission(to.params.id)) { next() } else { next('/403') } } } // 組件守衛 export default { beforeRouteEnter (to, from, next) { // 處理邏輯 }, beforeRouteLeave (to, from, next) { // 處理邏輯 } }
在全局守衛中,可以通過next函數傳遞參數來控制頁面跳轉。當傳遞的參數為false時,頁面會停留在當前頁面,否則會跳轉到目標路由。
在路由獨享守衛中,可以通過next函數傳遞參數來控制頁面跳轉。當傳遞的參數為false時,頁面會停留在當前頁面,否則會跳轉到目標路由。
在組件守衛中,beforeRouteEnter是在組件實例化之前被調用,所以在這個守衛里面是無法訪問組件實例的。而beforeRouteLeave是在組件卸載之前被調用。
總之,路由守衛是在Vue中非常重要的一部分,能夠幫助我們保護我們的應用程序不受惡意攻擊和非法訪問。掌握它的使用方法,不僅有助于提升應用程序的安全性,而且也能夠有效地管理和控制導航。