导航守卫如何再跳转前根据角色拒绝跳转

在导航守卫中，可以使用路由元信息（meta）来定义路由的角色权限。在跳转前，可以通过检查当前用户的角色和路由的角色权限来决定是否拒绝跳转。

首先，在定义路由时，可以为每个需要权限控制的路由添加一个角色权限的 meta 字段，例如：

const routes = [
  {
    path: '/admin',
    component: AdminComponent,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/user',
    component: UserComponent,
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  },
  // ...
];

然后，在导航守卫中，可以监听路由跳转事件，并在跳转前进行角色权限的检查，例如：

router.beforeEach((to, from, next) => {
  const requiresAuth = to.meta.requiresAuth;
  const roles = to.meta.roles;

  // 如果路由需要权限控制
  if (requiresAuth) {
    // 获取当前用户的角色信息，例如从 Vuex 的状态中获取
    const userRole = store.state.user.role;

    // 检查用户角色是否包含在路由的角色权限中
    if (roles.includes(userRole)) {
      // 允许跳转
      next();
    } else {
      // 拒绝跳转，可以跳转到一个无权限页面或者给出提示信息
      next('/unauthorized');
    }
  } else {
    // 不需要权限控制的路由，直接跳转
    next();
  }
});

上述代码中，requiresAuth 表示该路由是否需要权限控制，roles 是一个数组，包含了允许访问该路由的角色列表。在导航守卫中，首先判断要跳转的路由是否需要权限控制，如果需要，则获取当前用户的角色信息，并检查该角色是否在路由的角色权限列表中。如果是，则允许跳转，否则拒绝跳转。

需要注意的是，上述代码中的示例是使用 Vue Router 和 Vuex 的组合来实现导航守卫的角色权限控制，具体实现可能会因为使用的框架和状态管理库而有所不同