Vue设置路由拦截

路由守卫

在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()，页面一直跳转直到内存溢出。

• 每个项目的验证是否拥有权限不一样，权限判断那一块可以根据自己的实项目需求来进行操作。