導航守衛(wèi)其實也是路由守衛(wèi)，也可以是路由攔截(JAVA中的過濾器, Django,ThinkPHP中的中間件)，我們可以通過路由攔截，來判斷用戶是否登錄，該頁面用戶是否有權(quán)限瀏覽，需要結(jié)合meta來實現(xiàn)
vue中路由守衛(wèi)一共有三種，一個全局路由守衛(wèi)，一個是組件內(nèi)路由守衛(wèi)，一個是router獨享守衛(wèi)
所謂的路由守衛(wèi)可以簡單的理解為一座房子的門口的保安，想要進入這個房子就必須通過保安的檢查，要告訴路由守衛(wèi)你從哪里來？總不能隨便陌生人就給放進去？要到哪里去？然后保安再告訴你下一步該怎么做？如果你的確是這個房子主人允許進入的人，那就讓你進入，否則就要打電話給房子主人，跟房主商量(登錄注冊)，給你權(quán)限。
// 通過這個匹配判斷是否有該權(quán)限或要求，這個一般作為頁面權(quán)限設置，比如哪些頁面需要登錄才能進入，哪些不需要 to.matched.some(res => res.meta.requireAuth)
一、全局路由守衛(wèi)
所謂全局路由守衛(wèi)，就是小區(qū)大門，整個小區(qū)就這一個大門，你想要進入其中任何一個房子，都需要經(jīng)過這個大門的檢查
全局路由守衛(wèi)有個兩個：一個是全局前置守衛(wèi)，一個是全局后置守衛(wèi)
router.beforeEach((to, from, next) => {
console.log(to) => // 到哪個頁面去？
console.log(from) => // 從哪個頁面來？
next() => // 一個回調(diào)函數(shù)
}
router.afterEach（to，from） = {}next()：回調(diào)函數(shù)參數(shù)配置
next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了 (可能是用戶手動或者瀏覽器后退按鈕)，那么 URL 地址會重置到 from 路由對應的地址
next('/') 或者 next({ path: '/' }): 跳轉(zhuǎn)到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。你可以向 next 傳遞任意位置對象，且允許設置諸如 replace: true、name: 'home' 之類的選項以及任何用在 router-link 的 to prop 或 router.push 中的選項
二、組件路由守衛(wèi)
// 跟methods: {}等同級別書寫，組件路由守衛(wèi)是寫在每個單獨的vue文件里面的路由守衛(wèi)
beforeRouteEnter (to, from, next) {
// 注意，在路由進入之前，組件實例還未渲染，所以無法獲取this實例，只能通過vm來訪問組件實例
next(vm => {})
}
beforeRouteUpdate (to, from, next) {
// 同一頁面，刷新不同數(shù)據(jù)時調(diào)用，
}
beforeRouteLeave (to, from, next) {
// 離開當前路由頁面時調(diào)用
}三、路由獨享守衛(wèi)
路由獨享守衛(wèi)是在路由配置頁面單獨給路由配置的一個守衛(wèi)
export default new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: 'Home',
beforeEnter: (to, from, next) => {
// ...
}
}
]
})vue-router提供了導航鉤子:全局前置導航鉤子 beforeEach和全局后置導航鉤子 afterEach，他們會在路由即將改變前和改變后進行觸發(fā)。所以判斷用戶是否登錄需要在beforeEach導航鉤子中進行判斷。
導航鉤子有3個參數(shù)：
1、to:即將要進入的目標路由對象；
2、from:當前導航即將要離開的路由對象；
3、next ：調(diào)用該方法后，才能進入下一個鉤子函數(shù)（afterEach）。
next()//直接進to 所指路由
next(false) //中斷當前路由
next('route') //跳轉(zhuǎn)指定路由
next('error') //跳轉(zhuǎn)錯誤路由
beforeEach：
路由配置文件：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HomePage from '@/pages/home.vue'
Vue.use(Router)
const router=new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/home',
name: 'home',
component: HomePage
},
{
path:'*',
redirect:'/home'
}
],
})
router.beforeEach((to,from,next)=>{
console.log(to);
console.log(from);
next();
})
export default router;打印結(jié)果如下:
實現(xiàn)用戶驗證的代碼：
router.beforeEach((to, from, next) => {
//我在這里模仿了一個獲取用戶信息的方法
let isLogin = window.sessionStorage.getItem('userInfo');
if (isLogin) {
//如果用戶信息存在則往下執(zhí)行。
next()
} else {
//如果用戶token不存在則跳轉(zhuǎn)到login頁面
if (to.path === '/login') {
next()
} else {
next('/login')
}
}
})afterEach:
和beforeEach不同的是afterEach不接收第三個參數(shù) next 函數(shù)，也不會改變導航本身，一般beforeEach用的最多，afterEach用的少.
router.afterEach((to,from)=>{ //這里不接收next
console.log(to);
console.log(from);
})