Vue实现登录拦截

我们知道，许多页面在进入之前都是需要进行登录验证的。如果用户没有登录，则用户访问这些网页时直接跳到网站登录页。Vue的登录拦截主要通过router的配置实现。

1. requireAuth属性

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

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

2. router.beforeEach

beforeEach是router的钩子函数，该函数在进入每个网页之前调用，该函数接受三个参数:

1. from: 即将离开的路由
2. to: 即将要跳转的路由
3. 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()
    }
})

参考博客:
【vue+axios】一个项目学会前端实现登录拦截