我是怎么做动态按钮权限的（四）

这是我参与12月更文挑战的第30天，活动详情查看：2021最后一次更文挑战

上文，贴了我做的基于 Node.js 做的 Vue 自定义组件的添加和绑定当前页面id，下面我给大家讲一下代码细节：

代码最外层，是使用 fs.readFile 的方法，对路由权限文件 dynamic-router.js 进行读取，因为这个文件里，包含了我当前页面的路径和 id，可以直接通过遍历读取页面路径，将当前页面 id 绑定到我定义的 Vue 自定义组件上，这是最关键的一步

我们来看看 dynamic-router.js 文件里有什么，下面是该文件的截取：

{
    path: '/rentclient',
    component: Layout,
    code: 'saas-operation-tenant-menu',
    meta: {
      title: '机构管理',
      isShowMenu: true,
      icon: 'user'
    },
    alwaysShow: true,
    children: [
      {
        path: 'manager',
        component: () => import('@/views/rentClient/manageList.vue'),
        code: 'saas-operation-tenant-url',
        name: 'Manager',
        meta: { title: '机构信息管理', icon: 'fbi' }
      }
    ]
  }

以上代码可见，component 里包含的就是我们需要的当前页面的路径， code 里包含的是我们需要的当前页面的 id。

处理 dynamic-router.js 文件

那怎么对 dynamic-router.js 文件进行使用呢？因为 Node.js 不能使用 es6 的语法，所以我们需要在不影响业务代码的前提下，对其进行简单的处理，通过正则表达式，将需要的数据部分提取出来，然后将其拼接上 module.exports= ，写入一个临时js中，待使用。

dynamic-router.js 的结构如下：

• 我们需要对其进行正则的分组匹配，以 export const allPermissionsRouter = 为分界线，分为前后两组，取第二组，代码如下：

routerData = /[\s\S]*export const allPermissionsRouter =([\s\S]*)/i.exec(data)
    let result1 = routerData[1]

• 上面还有 Layout 变量，是被引入的，我们需要对其进行替换；因为这里做按钮权限，不需要这个变量，所以我们直接将其替换成字符串 "Layout"； 替换完以后，发现 component 使用的是import的路径，这里也是无法被解析到的，需要替换成相对路径，供后续使用：

component: () => import('@/views/rentClient/manageList.vue')
替换为：
component: './src/views/rentClient/manageList.vue'

这两步的代码如下：

result1 = result1
      .replace(/Layout/g, '"Layout"')
      .replace(/\(\) => import\('@(.*)'\)/g, (match, r1) => `'./src${r1}'`)

最后，我们再将 result1 写入到一个js文件，通过 module.exports 方法导出，并写入一个临时 js 中：

result1 = 'module.exports=' + result1
    // .replace(/component:\s\(\)\s=>\simport\('@([\s\S]*)'\)/g, "component:'./src$1")
    // pageBtnLimit = recursiveRouterData(JSON.parse(result1))
    fs.writeFile('./demo.js', result1, function (error) {}

写入后的处理，待我们下次分解。