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();
    }
})