Vue中实现权限控制的方法示例

一、前言

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

1、接口访问的权限控制

2、页面的权限控制

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

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

二、接口访问的权限控制

接口权限就是对用户的校验。正常来说，在用户登录时服务器需要给前台返回一个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 => {
     //请求成功后的操作
    })

后来在一些文章中发现axios可以在拦截器中直接将Token塞入config.headers.Authorization中，作为全局传入。下面是代码部分：

//main.js
import axios from 'axios'
// 实例化Axios，并进行超时设置
const service = axios.create({
  timeout: 5000
})
// baseURL
// axios.defaults.baseURL = 'https://api.github.com';
// http request 拦截器
// 每次请求都为http头增加Authorization字段，其内容为token
service.interceptors.request.use(
  config => {
    if (store.state.user.token) {
      config.headers.Authorization = `token ${store.state.user.token}`;
    }
    return config
  },
  err => {
    return Promise.reject(err)
  }
);
export default service

三、页面权限控制

在前面已经说到，页面权限控制又分为两种：

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

这些权限一般是在固定页面进行配置，保存后记录到数据库中。

按钮权限暂且不提，页面访问权限在实现中又可以分为两种方式：

1显示所有菜单，当用户访问不在自己权限内的菜单时，提示权限不足
2只显示当前用户能访问的权限内菜单，如果用户通过URL进行强制访问，则会直接进入404

既然展现出来后不能点，那算几个意思，逗我玩儿呢？所谓眼不见为净，综合考虑后，肯定是方案二比较符合良好的用户体验。