vue頁面跳轉攔截器

第一步：路由攔截

首先在定義路由的時候就需要多添加一個自定義字段requireAuth，用於判斷該路由的訪問是否需要登錄。如果用戶已經登錄，則順利進入路由， 
否則就進入登錄頁面。在路由管理頁面添加meta字段

import Vue from 'vue'
import Router from 'vue-router'


Vue.use(Router)


const routes = [
    {
        path: '/',
        name: "歡迎",
        meta: {
            requireAuth: true,  // 添加該字段，表示進入這個路由是需要登錄的
        },
        component: resolve => require(["../components/Hello.vue"], resolve)
    },
    {
        path: '/login',
        name: "登錄",
        /*meta: {
            requireAuth: false,  // 添加該字段，表示進入這個路由是需要登錄的
        },*/
        component: resolve => require(["../view/login/login.vue"], resolve)
    }
]


export default new Router({
    base: "/",
    routes
})

 

　　

　　定義完路由后，我們主要是利用vue-router提供的鈎子函數beforeEach()對路由進行判斷。。所以在main.js加上

import router from '@/router/router.js'
//實例配置在上面，路由攔截在下面
router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判斷該路由是否需要登錄權限
        if (store.state.token) {  // 通過vuex state獲取當前的token是否存在
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}  // 將跳轉的路由path作為參數，登錄成功后跳轉到該路由
            })
        }
    }
    else {
        next();
    }
})