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

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

遇到问题

上文提到开发动态按钮权限，主要遇到了两个问题：

1. 按钮使用的标签不统一，有用 span 定义按钮的，有用 button定义的，还有使用 div 定义。

2. 涉及到的页面多达四五十个，挨个去根据页面 id 绑定自定义组件，工作量大且容易出错。

解决问题

那我是怎么解决这个问题的呢？

解决思路

上文，其实已经提到过对于按钮标签不同的解决办法：

• 因为是 table 列表页，所以按钮都被包裹在了 <el-table-column label="操作"></el-table-column>标签下，只需要将自定义组件，绑定到这个父组件上，然后使用 el.children 遍历子组件，将当前页面所有按钮类型与服务端传来的权限按钮类型，进行一一比对即可。

而将自定义组件绑定到四五十个页面，且需要将当前页面id传进去，这就涉及到文件的读写，关于文件的读写，我首先想到了 Node.js ，那我又是怎么利用 Node.js 解决这个问题的呢？直接上代码：

const fs = require('fs')
let pageBtnLimit = []
let routerData = []
// 异步读文件方法
fs.readFile('./src/router/dynamic-router.js', 'utf-8', function (err, data) {
  if (err) {
    console.log('文件读取错误')
  } else {
    routerData = /[\s\S]*export const allPermissionsRouter =([\s\S]*)/i.exec(data)
    let result1 = routerData[1]
    result1 = result1
      .replace(/Layout/g, '"Layout"')
      .replace(/\(\) => import\('@(.*)'\)/g, (match, r1) => `'./src${r1}'`)
    result1 = 'module.exports=' + result1
    fs.writeFile('./demo.js', result1, function (error) {
      if (error) {
        console.log('写入失败')
      } else {
        pageBtnLimit = recursiveRouterData(require('./demo.js'))
        console.log('写入成功了', pageBtnLimit.length)
        pageBtnLimit.forEach((item) => {
          console.log('item.path', item.path)
          fs.readFile(item.path, 'utf-8', function (err, data) {
            if (err) {
              console.log('文件读取错误', err)
            } else {
              let html = /([\s\S]*label="操作"[\s\S]*<template slot-scope="scope">)([\s\S]*?)(<\/template>[\s\S]*)/i.exec(
                data
              )
              html = html ? `${html[1]}<span v-btnlimit="'${item.code}'">${html[2]}</span>${html[3]}` : data
              fs.writeFile(item.path, html, function (error) {
                if (error) {
                  console.log('写入失败')
                } else {
                  console.log('写入成功')
                }
              })
            }
          })
          // }
        })
      }
    })
    // console.log(routerData)
  }
})
const resultData = []

function recursiveRouterData(arr) {
  arr.forEach((item) => {
    if (item.code && item.component != 'Layout') {
      resultData.push({
        code: item.code,
        path: item.component.indexOf('.vue') > -1 ? item.component : `${item.component}.vue`
      })
    }
    if (item.children) {
      resultData.concat(recursiveRouterData(item.children))
    }
  })

  return resultData
}