我們知道，許多頁面在進入之前都是需要進行登錄驗證的。如果用戶沒有登錄，則用戶訪問這些網(wǎng)頁時直接跳到網(wǎng)站登錄頁。Vue的登錄攔截主要通過router的配置實現(xiàn)。

1. requireAuth屬性

requireAuth屬性作用是表明該路由是否需要登錄驗證，在進行全局攔截時，我們將通過該屬性判斷路由的跳轉，該屬性包含在meta屬性中:

routes = [
    {
        name: 'detail',
        path: '/detail',
        meta: {
            requireAuth: true
        }
    },
    {
        name: 'login',
        path: '/login'
    }
]

2. router.beforeEach

beforeEach是router的鉤子函數(shù)，該函數(shù)在進入每個網(wǎng)頁之前調用，該函數(shù)接受三個參數(shù):

1. from: 即將離開的路由
2. to: 即將要跳轉的路由
3. next: 跳轉方法。在beforeEach函數(shù)中作為結束語句調用，以實現(xiàn)跳轉網(wǎng)頁。
   使用beforeEach鉤子函數(shù)結合requireAuth屬性判斷網(wǎng)頁是否需要登錄驗證、再使用vuex進行token判斷， 就能實現(xiàn)登錄攔截的功能:

router.beforeEach((from, to, next) => {
    if (to.meta.requireAuth) { // 判斷跳轉的路由是否需要登錄
        if (store.state.token) { // vuex.state判斷token是否存在
            next() // 已登錄
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath} // 將跳轉的路由path作為參數(shù)，登錄成功后跳轉到該路由
            })
        }
    } else {
       next()
    }
})

參考博客:
【vue+axios】一個項目學會前端實現(xiàn)登錄攔截