Vue Router导航守卫解决页面跳转权限问题

需求描述：

我现在开发的项目有一个需求，就是我的网站有两个用户页面，管理员页面和普通用户页面，此时我不仅仅需要判断用户是否登录还要判断用户权限，确认用户能否导航到这个页面。

所以现在Vue的导航守卫就能派上用场了。

我的一贯宗旨，直接上干货！

步骤：

1.在router的index.js中的导航中添加mate关键字

示例：

我的router结构是这样的
  {
    path: '/userIndex',			// 管理员用户后端
    name: 'userIndex',
    meta: {
      requiresAuth: true,			// 判断是否参与登录校验
      requiredRoles: true			// 判断是否参与权限校验
    },
    component: () => import('../views/UserIndex.vue')
  },
  {
    path: '/RegularUserIndex',	//普通用户后端
    name: 'RegularUserIndex',
    meta: {
      requiresAuth: true 			// 判断是否参与登录校验
    },
    component: () => import('../views/RegularUserIndex.vue')
  },

2. 继续在index.js中定义导航守卫

// 导航守卫
router.beforeEach((to, from, next) => {
  // 判断是否需要登录校验
  if (to.matched.some(record => record.meta.requiredRoles)) {
    // 如果用户未登录，重定向到登录页面
    if (!store.state.loginStatus) {
      next('/login');
    } else {
      // 判断权限问题
      if (to.matched.some(record => record.meta.requiredRoles)) {
        console.log(store.state.rank);
        if (store.state.rank == 0 || store.state.rank == 1) {
          next();
        } else {
          next(false);    // 需要和return共同使用
          return
        }
      }
      next(); // 用户已登录，继续导航
    }
  } else {
    next(); // 不需要登录校验，直接导航
  }
});

3. 关键字讲解：

1）to.matched.some(record => record.meta.requiredRoles)

就是跳转到的目录刚刚定义的meta.requiredRoles是否为true，也就是是否定义并参加导航守卫的值守。

2） store.state.loginStatus

这个是我的页面的全局变量中的登陆状态校验变量。我需要判断是否登录，再判断是否放行。

3） store.state.rank

判断用户权限等级问题，只有rank为0/1的才放行

4） next()

next()为router的放行函数，当出现next()，并形参为空时，则不进行阻拦，当我们需要阻拦用户进行跳转时则需要在next()中添加false形参，也就是next(false)，注意！一定要配合return;一起使用。这是踩坑点。

踩坑点：

next(false)一定要配合return;一起使用