（登录页面跳转/404页面跳转相关）使用vue路由模块全局前置守卫时某些指定页面无法正常跳转问题小记

全局前置守卫可以用于限制用户未登录访问某些页面的行为，避免某些页面被强行访问

• 实际需求分析：在饭店管理系统中设定未登录不允许进入所有除登录页面的以外的页面，同时输入不存在的页面会返回404页面

1. 在未登录的情况下，用户在localhost:8080/后输入任何页面路径会强行跳转至登录页面
2. 在已登录的情况下（采用token验证），用户想访问其有权限的页面会放行
3. 在已登录的情况下，用户想访问不存在的页面或者无权限的页面，会跳转至404页面

• 实现功能时遇到的问题：实现3的时候无法跳转404页面！

  未修改代码
  (其实这是小问题，但是刚开始写的时候脑子没转过来，没想通…希望也可以帮到你）
  此时的跳转404页面无法进行，因为遇到情况3时浏览器会无限跳转到/notfound页面，因为此时/notfound页面并未在全局前置守卫中表明放行，每一次跳转/notfound页面都会进入全局前置路由守卫中匹配上跳转/notfound的规则，构成死循环/notfound=>/notfound=>…=>/notfound=>/notfound
  
  修改代码
  给/notfound页面的访问给予放行
  修改后代码+数据说明
  注意事项
  用if…else严格保证一次路由跳转中只会执行一次next()

具体参考官方文档vue文档-全局前置守卫

router.beforeEach((to, from, next) => {
  var token = JSON.parse(window.localStorage.getItem('token'))
  if (to.path === '/login' || to.path === '/' || to.path === '/notfound') {
    next()
  } else if (token) {//token存在表明已登录
    if (cpathArr.indexOf(to.path) !== -1 && token.type === 1) {
      next()//访问权限类型为1的页面且登录人的权限类型是1，给予放行
    } else if (epathArr.indexOf(to.path) !== -1 && token.type === 2) {
      next()//访问权限类型为2的页面且登录人的权限类型是2，给予放行
    } else if (bpathArr.indexOf(to.path) !== -1 && token.type === 3) {
      next()//访问权限类型为3的页面且登录人的权限类型是3，给予放行
    } else {
      next('/notfound')//访问非登录人权限外的页面或不存在的页面，跳转404页面
    }
  } else next('/login')//所有未登录情况下访问任何页面均跳转登录页面
})