我们知道，许多页面在进入之前都是需要进行登录验证的。如果用户没有登录，则用户访问这些网页时直接跳到网站登录页。Vue的登录拦截主要通过router的配置实现。
1. requireAuth属性
requireAuth属性作用是表明该路由是否需要登录验证，在进行全局拦截时，我们将通过该属性判断路由的跳转，该属性包含在meta属性中:
routes = [
{
name: 'detail',
path: '/detail',
meta: {
requireAuth: true
}
},
{
name: 'login',
path: '/login'
}
]
2. router.beforeEach
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()
}
})
