vue中如何实现后台管理系统的权限控制的方法步骤-创新互联

一、前言

在广告机项目中，角色的权限管理是卡了挺久的一个难点。首先我们确定的权限控制分为两大部分，其中根据粒的大小分的更细：

• 接口访问的权限控制
• 页面的权限控制
  • 菜单中的页面是否能被访问
  • 页面中的按钮（增、删、改）的权限控制是否显示

下面我们就看一看是如何实现这些个权限控制的。

二、接口访问的权限控制

接口权限就是对用户的校验。正常来说，在用户登录时服务器需要给前台返回一个Token,然后在以后前台每次调用接口时都需要带上这个Token,

然后服务端获取到这个Token后进行比对，如果通过则可以访问。

现有的做法是在登录成功的回调中将后台返回的Token直接存储到 sessionStorag​e ，然在请求时将Token取出放入headers中传给后台，代码如下：

this.$http({
   method: 'get',
   url: 'test/query?id=20',
   withCredentials: true,
   headers: {
   token: sessionStorage.getItem('token'),
   name: sessionStorage.getItem('name') //应后台需求传的用户名
   }
  }).then(response => {
   //请求成功后的操作
  })