【Vue】通过导航守卫实现页面访问权限功能

最近负责的项目中有一个需求是这样的:

1.

管理员可以给其他用户设置某些按钮的权限，比如编辑，新增等按钮的权限，当被设置为无权限时，那么点击编辑或新增的时候，是无法进入编辑或新增页面的，而是通过提示框来提示用户无权限。

2.

这里有个地方需要注意，虽然不能通过点击编辑或新增来进入相应的页面，但是却可以通过路由来访问编辑或者新增页面，这不是我们想看到的，如果可以通过路由直接访问页面，那按钮的权限控制就相当于形同虚设，没有任何意义了。

因此这里采用了导航守卫，来限制用户是否有权限访问某些页面。

3.

实际上，对于每个按钮是否有权限可以去进行点击操作，是根据后端返回的接口数据来决定的。数据格式类似于下面这种格式
 

{
  code: 0,
  data: [{
    comment: '编辑',
    checkStatus: false
  }, {
    comment: '新增',
    checkStatus: true
  }]
}

这里的code可以当做状态码来看待，当code为0，说明请求成功了，而data则是通过接口获取到的按钮的权限, comment是按钮名称，checkStatus是按钮的状态，在开头我已经说明了，管理员可以给不同的用户设置按钮的权限，所以假设我给小明新增编辑按钮的权限，那么checkStatus