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.jsimport axios from 'axios'// 实例化Axios，并进行超时设置const service = axios.create({  timeout: 5000})// baseURL// axios.defaults.baseURL = 'https://api.github.com';// http request 拦截器// 每次请求都为http头增加Authorization字段，其内容为tokenservice.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、创建路由表

创建路由表实际上没有什么难度，照着vue-router官方文档给的示例直接写就行了。但是因为有部分页面是不需要访问权限的，所以需要将登录、404、维护等页面写到默认的路由中，而将其它的需要权限的页面写到一个变量或者一个文件中，这样可以有效的减轻后续的维护压力。