Vue路由守卫

一、全局路由守卫

全局路由前置守卫

当用Vue开发的时候，如果项目涉及登录的话，一般都要做登录验证。用户必须先登录，拿到token才可以访问页面。因为路由是暴露的，用户可以通过修改URL来修改路由直接跳过登录验证。路由守卫就是解决以上问题的。看下以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Login from './views/Login.vue'

Vue.use(Router)

const vueRouter = new Router({
    routes: [
        {
            path: '/',
            name: 'Home',
            component: Home,
            meta: {
                needLogin: true
            }
        },
        {
            path: '/Login',
            name: 'Login',
            component: Login,
            meta: {
                needLogin: false
            }
        }
    ]
})

vueRouter.beforeEach((to, from, next) => {
    if (to.meta.needLogin && !sessionStorage.getItem('TOKEN')) {
        next({
            path: '/Login'
        })
    } else {
        next()
    }
})

export default vueRouter;

上面的有配置的路由表，beforeEach表示每次路由进入之前要执行的方法。meta中needLogin表示该网页是否需要登录验证，如果为true则跳过登录验证。登录完之后TOKEN会被保存在sessionStorage中，所以可以根据sessionStorage中是否有值来判断是否有登录，如果没TOKEN返回登录页。路由守卫接收三个参数：

beforeEnter(to,from,next)
to：//即将要进入的目标路由对象
from：//当前导航正要离开的路由
next：//执行下一步

next()//直接进to 所指路由
next(false) //中断当前路由
next('route') //跳转指定路由
next('error') //跳转错误路由

全局路由后置守卫

全局路由后置守卫用到的地方倒不是很多，我一般目前用到的也就是埋点。afterEach和beforeEach钩子的参数类似，就是afterEach没有next方法。

vueRouter.afterEach((to, from) => {
    // ...
})

二、路由独享守卫

当全局的守卫不能满足某个页面的要求时，这个时候就需要用到独享守卫。用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

{
    path: '/about',
    name: 'about',
    component: () => import('./views/About.vue'),
    beforeEnter(to, from, next) {
        to.query.returnURL = from.path;
        next();
    }
}

三、组件内守卫

beforeRouteEnter 是组件内的路由导航守卫，在确认渲染该组件的对应路由前调用。该守卫不能访问 this，但我们通过传一个回调给 next，就可以使用下例的 vm 来访问组件实例。

// 组件内的路由导航守卫
beforeRouteEnter(to, from, next) {
    // 路由的名称，对应路由配置中的 name
    const fromName = from.name;
    // 确认导航
    next(vm => {
        // 通过 vm 参数访问组件实例，已登录时，评估路由名称
        if (vm.$store.state.auth) {
            switch (fromName) {
                // 如果从注册页面跳转过来
                case "Register":
                    // 显示注册成功
                    vm.showMsg("注册成功");
                    break;
            }
        }
    });
}