关键词

vue如何根据权限生成动态路由、导航栏

生成动态路由,实现权限控制是一个较为常见的需求,以下是可以参考的攻略:

1.准备工作

1)安装依赖

需要安装vue-router和vue-cli-plugin-auto-routing模块

npm install vue-router vue-cli-plugin-auto-routing --save

2)配置自动路由生成插件

首先需要在vue.config.js文件里面添加一个插件

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        "@": require("path").resolve(__dirname, "src")
      }
    }
  },
  transpileDependencies: ["vuetify"],
  devServer: {
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  pluginOptions: {
    autoRouting: {
      chunkNamePrefix: "page-",
      pages: "src/pages",
      nested: true
    }
  }
};

这段代码的作用是配置插件自动化生成路由,其中:

  • chunkNamePrefix 用于生成路由的名字前缀
  • pages 告诉插件路由的代码文件都在哪个目录里面
  • nested 表明这个目录是嵌套的

2.为让生成的路由可控,需要重新编写路由文件

根据自己的需求,构造一个树形菜单,例如:

const menus = [
  {
    name: "Dashboard",
    icon: "mdi-view-dashboard",
    path: "/dashboard"
  },
  {
    name: "用户管理",
    icon: "person",
    path: "/users",
    children: [
      {
        name: "新增用户",
        icon: "",
        path: "/users/new"
      },
      {
        name: "用户列表",
        icon: "",
        path: "/users/list"
      }
    ]
  }
];

其中,每个对象都包含了必须的信息,包括指向的组件、路径、名称,还有可选的图标信息。

然后就是循环生成路由和菜单的过程,大体如下:

import router from "@/router";
import store from "@/store";

function addRoutes(menuList) {
  menuList.forEach((menu) => {
    if (menu.children && menu.children.length > 0) {
      addRoutes(menu.children);
    }
    let route = {
      name: menu.name,
      path: menu.path,
      component: () =>
        import("@/pages" + menu.path + "/index.vue"),
      meta: menu.meta || {}
    };
    let parent = getParentRoute(menu.path);
    router.addRoute(parent, route);
  });
}

function getParentRoute(path) {
  let parent = router.options.routes.find((i) => i.path === path);
  if (!parent) {
    parent = {
      name: path.slice(1),
      path: path,
      component: () => import("@/pages/parent.vue"),
      meta: {}
    };
    router.addRoute(parent);
  }
  return parent;
}

const permission = {
  createRoutes: async function () {
    try {
      addRoutes(menus);
      store.commit("permission/setRoutes", router.options.routes);
      console.log("router", router.options.routes);
    } catch (e) {
      console.error(e);
    }
  }
};

export default permission;

上面的代码分为两部分:

  • addRoutes 构造路由表
  • getParentRoute 判断是否有父组件,并返回父组件路径

3.实现菜单动态生成

在循环生成路由的时候,也就是上面 addRoutes 函数里面,我们需要将菜单推入到一个全局变量 menuInfo 里面,最后把这个变量赋值给 store,以便在页面渲染时使用.

function addRoutes(menuList) {
    menuList.forEach((menu) => {
        if (menu.children && menu.children.length > 0) {
            addRoutes(menu.children);
        }
        let route = {
            name: menu.name,
            path: menu.path,
            component: () => import(`@/views${menu.path}/index.vue`),
            meta: menu.meta || {}
        };
        let parent = getParentRoute(menu.path);
        router.addRoute(parent, route);
        addMenu(menu, parent);
    });
}
const permission = {
    createRoutes: async function () {
        try {
            addRoutes(menus);
            store.commit('permission/setRoutes', router.options.routes);
            store.commit('permission/setMenuInfo', menuInfo);
            console.log('router', router.options.routes);
        } catch (e) {
            console.error(e);
        }
    }
};

接下来只需要在整个页面中调用这个 permission.createRoutes(),就可以自动化生成菜单和路由,实现权限管理了。

  1. 示例

这里提供两个使用自动化路由技术进行权限管理的示例:

  • 网站管理平台

某公司为自己的网站构建了一个可视化的管理平台,用于对网站内容、用户、前端界面进行管理。这个平台需要进行权限管理,管理员才能查看和操作网站相关内容,为此他们需要动态生成权限控制的路由和对应的菜单。

他们首先定义了一个功能树,树状结构中对应着导航菜单的结构,通过自动化路由插件,从配置文件 vue.config.js 中引用到插件配置,自动生成动态路由,并使用 router.addRoutes 动态将路由添加到VueRouter中。

然后根据功能树的结构,在配置文件当中定义好菜单的嵌套结构,每个菜单都对应着一个路由,当路由被匹配时,Vue会根据路径及文件配置自动加载对应的页面组件。并使用添加 routes 时的 addMenu 函数,将路由对象添加到菜单栏中。

  • 在线考试管理系统

某所学校开发了一个在线考试系统,要求管理员能够控制用户的考试权限。管理员以树状结构的形式设置各种试卷和考试的权限。不同的权限跳转到不同的页面,因此需要使用自动化路由技术。

管理员可以将试卷分组,也能指定用户或用户组对试卷的访问权限,例如,密钥保持在数据库中,或者只允许某个特定的IP地址访问某个特定的试卷。由于考试系统为受限区域,管理员不需要考虑攻击问题。

管理员管理权限时,需要对应到 routes map 中的节点,并使用对应的 router-view 渲染组件。如果当前登录的用户没有访问某个特定路由的权限,Vue会自动跳转到默认路径。

本文链接:http://task.lmcjl.com/news/9802.html

展开阅读全文