vue实现角色权限控制

• 页面中的按钮（增、删、改）的权限控制是否显示

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

二、接口访问的权限控制

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

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

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

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

三、页面权限控制

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

• 菜单中的页面是否能被访问

• 页面中的按钮（增、删、改）的权限控制是否显示

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

---

按钮权限暂且不提，页面访问权限在实现中：

• 只显示当前用户能访问的权限内菜单，如果用户通过URL进行强制访问，则会直接进入404

好，我们现在梳理一下大致的页面访问权限的流程：

获取用户权限并存储————————>根据用户权限选择性渲染菜单

在对流程梳理完成后我们开始进行详细的编写。

1、创建路由表

创建路由表实际上没有什么难度，照着vue-router官方文档给的示例直接写就行了。但是因为有部分页面是不需要访问权限的，

所以需要将登录、404、维护等页面写到默认的路由中，而将其它的需要权限的页面写到一个变量或者一个文件中，这样可

以有效的减轻后续的维护压力。

下面将index.js的代码贴上，异步路由将适量减少，以免占过多篇幅。

// router/index.js

import Vue from ‘vue’

import Router from ‘vue-router’

import App from ‘@/App’

import store from ‘…/store/index’

Vue.use(Router);

//手动跳转的页面白名单

const whiteList = [

‘/’

];

//默认不需要权限的页面

const constantRouterMap = [

{

path: ‘/’,

name: ‘登录’,

component: (resolve) => require([‘@/components/login’], resolve)