前端开发完后需要实现权限管理，需要不同的地方有不同的权限，本来这个应该是后端的一个接口来控制的，但是，思来想去页面是前端的，
也得前端告诉后端有哪些地方需要权限啊，接下来就是权限设计的计划了
因为最终还是要后端来给前端的，交互方式普遍都是采用json，那么就思考怎么生成json吧，具体json设计如下
array:[
{
key:”dashbord”,
name:”总览权限控制”,
value:[
{
key:”show”,
name:’是否显示’,
value: true
},{
key:”show_daily”,
name:’是否显示工作日报’,
value: true
}
]
}];
其实非常直接，就是哪些对方需要权限，然后按模块划分出来，这样就是一个数组的结构，然后每个数组就是一个模块
每个模块都有一个key来表示模块的唯一性，有name来描述模块，模块下面有很多权限，我们又设计成一个数组
每个权限都是key、name、value形式，分别表示唯一性，权限描述、是否具备权限。
json设计完了，那么我想我们如果有一个非常漂亮的展示页面就更直观了，我们使用elementui，开源的框架能够非常方便的构建ui
具体设计如下：
<el-tabs tab-position=”left” @tab-click=”handleClick”>
代码非常简单，就是遍历json，把模块做成一个左侧的tab栏
然后再每个模块栏里面遍历value，用输入框和switch表示权限信息，我的想法是利用input的双向绑定，我们能够非常简单的修改编辑权限
当然，编辑的也就是我们的json数据了，我们再设计一个下载按钮就可以非常方便的下载数据了：
var json = JSON.stringify(this.array,null,’\t’);
const link = document.createElement(‘a’)
link.style.display = ‘none’
link.href = window.URL.createObjectURL(new Blob([json]))
link.setAttribute(‘download’, ‘permissions.json’)
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
后面我们又设计了一个新增的按钮，然后也可以新增权限了，这里就不再赘述了，
最大的问题是我们修改完数据，我们不能动态的修改vue中json的代码，我想我们是不是应该把这个下载和json设计在一个位置，这样就可以实现数据修改了