修改后的代码如下:

// 前置导航守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  const rolesLocal = localStorage.getItem('roles');
  const requiresAuth = to.meta.requiresAuth;
  const roles = to.meta.roles;

  // 如果该路由有权限且未登录,则跳转登录页面
  if (requiresAuth && !token) {
    alert("请先登录!");
    next("/login");
  } else {
    // 需要鉴权且登录
    if (requiresAuth && token) {
      if (rolesLocal === "admin") {
        // 判断用户角色,用户角色正确则放行,否则阻止跳转
        if (roles.includes(rolesLocal)) {
          alert("欢迎您管理员!");
          next();
        } else {
          alert("权限不够!");
          next(false);
        }
      } else if (rolesLocal === "teacher") {
        // 判断用户角色,用户角色正确则放行,否则返回上一页面
        if (roles.includes(rolesLocal)) {
          alert("欢迎您优秀的教师!");
          next();
        } else {
          alert("权限不够!");
          next(false);
        }
      } else if (rolesLocal === "user") {
        // 判断用户角色,用户角色正确则放行,否则返回上一页面
        if (roles.includes(rolesLocal)) {
          alert("精英教育欢迎您的到来!");
          next();
        } else {
          alert("权限不够!");
          next(false);
        }
      } else if (to.name === "notfound") {
        next();
      } else {
        next("/error");
      }
    } else {
      // 不需要鉴权且未登录
      if (!requiresAuth && !token) {
        alert("请先登录!");
        next("/login");
      } else {
        next();
      }
    }
  }
});
``
前置导航守卫routerbeforeEachto from next = const token = localStoragegetItemtoken; const rolesLocal = localStoragegetItemroles; const requiresAuth = tometarequiresAuth; const roles = tometaroles; 如果该

原文地址: https://www.cveoy.top/t/topic/h7Bb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录