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会自动跳转到默认路径。