Vue实现登录拦截 requireAuth属性

requireAuth属性作用是表明该路由是否需要登录验证，在进行全局拦截时，我们将通过该属性判断路由的跳转，该属性包含在meta属性中:

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

beforeEach是router的钩子函数，该函数在进入每个网页之前调用，该函数接受三个参数: from: 即将离开的路由 to: 即将要跳转的路由 next: 跳转方法。在beforeEach函数中作为结束语句调用，以实现跳转网页。
使用beforeEach钩子函数结合requireAuth属性判断网页是否需要登录验证、再使用vuex进行token判断， 就能实现登录拦截的功能:

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作为参数，登录成功后跳转到该路由
            })
        }
    } else {
       next()
    }
})