登录权限

妖狐艹你老母 2021-07-25 23:59 416阅读 0赞

// 计算动态路由
    export function createRoutes() { 
      let role = localStorage.getItem("role");
      let dynamicRoutes = calcuRoutes(allRoutes, role);
    
      // 使用内置方法挂载 动态路由
      router.addRoutes(dynamicRoutes);
    
      // 得到对应的角色可见的route对象
      let visibleMenu = calcuVisibleMenu(dynamicRoutes);
      console.log("visibleMenu", visibleMenu);
    
      localStorage.setItem("visibleMenu", JSON.stringify(visibleMenu));
    }
    
    /** * @description calcuRoutes 找出所有符合角色的路由 对于包含了子路由的对象使用递归 * @param allRoutes 所有路由信息 * @param role 当前用户角色 * @returns 返回存了符合当前角色的路由数组dynamicRoutes */
    function calcuRoutes(allRoutes, role) { 
      let dynamicRoutes = allRoutes.filter((route) => { 
        if (hasPermission(route, role)) { 
          // 如果存在子路由
          if (route.children && route.children.length) { 
            // 递归实现子路由重写
            route.children = calcuRoutes(route.children, role);
          }
          // 有权限的 filter将其对应的路由对象存入数组
          return true;
        } else { 
          // 没有权限 返回false filter返回的数组为空
          return false;
        }
      });
      return dynamicRoutes;
    }
    
    /** * @description 判断传入的路由对当前登录角色是否可见 * @param route 路由对象 * @param role 角色信息 * @returns true 此路由对此角色有权限 */
    function hasPermission(route, role) { 
      if (route.meta && route.meta.role) { 
        return route.meta.role.includes(role);
      } else { 
        // 没有role信息的route对所有角色可见
        return true;
      }
    }
    
    /** * @description 根据角色计算出用户可见菜单 * @param dynamicRoutes 传入的动态路由 * @returns 用户可见的路由对象 */
    function calcuVisibleMenu(dynamicRoutes) { 
      return dynamicRoutes.filter((route) => { 
        if (isVisible(route)) { 
          return true;
        } else { 
          return false;
        }
      });
    }
    
    /** * @description 判断传入的一级路由是否要显示菜单栏 * @param {*} route 传入的路由信息 * @returns true false */
    function isVisible(route) { 
      return route.visible;
    }
    
    createRoutes();