不借助后端，前端本地如何将内容写入文件并保存

需求背景

我司后台系统的路由菜单为了做权限控制，都是将其保存在后端中，登录后再通过接口将其返回给前台。

在每次有新版本新页面增加时，上线前再在后台中录入路由页面。

虽然路由菜单页面的数据是通过接口来的，但在开发时一般都是前端先定义好路由，到上线时再到后台录入，所以其实前端本地是维护有一份完整的路由表的，这样也有利于团队协作时对整个项目的页面有一个统一的了解入口，其次也可以防止后台菜单数据丢失或因维护错乱导致的问题等，有备无患嘛。

需求：后端同学希望前端将所有路由导出成一个json文件给后端，后端直接将其导入到数据库中，避免每次上线新增页面时都要花时间去后台录入。

果然程序员都是懒的。。。。。

如何实现

再看看这个需求，读写文件，第一反应前端来做这玩意得上node了吧，node也就几个api的事，但我又想了想，不用node行不行呢，答案是行的。

获取前端所有权限路由

// src/router/dynamic.js

// 自动扫描导入modules文件夹里的所有路由
const files = require.context('./modules', false, /\.js$/)
let modules = []
files.keys().forEach(key => {
  modules = modules.concat(files(key).default)
})

export default modules

各个模块的路由存放在 router/modules 下，方便管理，再通过上面的代码自动扫描导出所有路由

将路由数据转换为 Blob，再通过 file-saver.js 保存到本地

<template>
  <el-button 
      v-if="visible" 
      type="primary" 
      @click="exportRouters"
  >导出路由</el-button>
</template>

<script>
import dynamicRouters from '@/router/dynamic'
import FileSaver from 'file-saver'

export default {
  name: 'ExportRouterJson',

  computed: {
    visible() {
      return process.env.NODE_ENV === 'development'
    }
  },

  methods: {
    exportRouters() {
      const jsonStr = JSON.stringify(dynamicRouters)
      const blob = new Blob([jsonStr], { type: "text/json" })
      FileSaver.saveAs(blob, '系统路由表.json')
    }
  }
}
</script

最后

以上就是本文的全部，如果本文对你有什么帮助，码字不易，欢迎点赞！！！