路由守卫
在Vue中分为全局前置守卫 router.beforeEach ，和全局后置钩子 router.afterEach，相对应的说明可以查看官网。路由守卫我们一般用来拦截路由请求，对不同的路由进行不同处理。最常见的就是配合
axios对用户登录进行一个权限操作。
拦截规则
通常在项目里，我们需要用户进行登录，才能让用户查看项目。在后台管理系统中，会根据不同的用户权限展示不同的内容。
在用户访问页面之前，我们通过全局前置守卫对路由进行拦截，看看你是不是可以通过。通过的标准是否登录，如果登录就通过放行，没有通过就打回。打个比方：你下班开车要回家，路上有交警查车，交警问：同志，请出示驾驶证行驶证，如果你没有，就不能回家，交警叔叔肯定要带你回去问话。如果你有驾驶证，就可以回家。路由拦截就起到交警查证的作用，只不过每个项目检查的标准可能不一样。
上代码
-
router.js如果是vue-cli4.x版本是在router文件夹下面index.js
// 不需要路由验证页面
const whiteList = ['login', 'index']
router.beforeEach((to, from, next) => {
// 确定用户是否已登录
const hasToken = false // 这里就是路由是否通过标准，一般都是通过token来验证
if (hasToken) { // 登录
if (to.path === '/login') {
// 如果已登录，请重定向到主页
next({ path: '/index' })
return
}
next()
} else {
if (whiteList.indexOf(to.name) !== -1) {
// 在免费登录白名单中，直接进入
next()
} else {
// 没有访问权限的其他页将重定向到登录页。
next(`/login`)
}
}
})
需要注意的一点是，用户没有登录，是需要跳转到登录页面，如果在白名单里面没有登录页或者没有
next()，页面一直跳转直到内存溢出。每个项目的验证是否拥有权限不一样，权限判断那一块可以根据自己的实项目需求来进行操作。
