/*** hidden: trueif `hidden:true` will not show in the sidebar(default is false)* redirect: noredirectif `redirect:noredirect` will no redirct in the breadcrumb* name:'router-name'the name is used by (must set!!!)* meta : {p: ['admin','editor']will control the page role (you can set multiple roles)name: 'title'the name show in submenu and breadcrumb (recommend set)icon: 'svg-name'the icon show in the sidebar,noCache: trueif fasle ,the page will no be cached(default is false)}**/
这里仅供参考，而且本项目为了支持无限嵌套路由，所有侧边栏这块使用了递归组件 。如需要请大家自行改造，来打造满足自己业务需求的侧边栏 。
侧边栏高亮问题:很多人在群里问为什么自己的侧边栏不能跟着自己的路由高亮，其实很简单，-ui官方已经给了-所以我们只要
:-="$route.path"
将-一直指向当前路由就可以了，就是这么简单
按钮级别权限控制
有很多人一直在问关于按钮级别粒度的权限控制怎么做 。我司现在是这样的，真正需要按钮级别控制的地方不是很多，现在是通过获取到用户的role之后，在前端用v-if手动判断来区分不同权限对应的按钮的 。理由前面也说了，我司颗粒度的权限判断是交给后端来做的，每个操作后端都会进行权限判断 。而且我觉得其实前端真正需要按钮级别判断的地方不是很多，如果一个页面有很多种不同权限的按钮，我觉得更多的应该是考虑产品层面是否设计合理 。当然你强行说我想做按钮级别的权限控制，你也可以参照路由层面的做法，搞一个操作权限表 。。。但个人觉得有点多此一举 。或者将它封装成一个指令都是可以的 。
axios拦截器
这里再说一说 axios 吧 。虽然在上一篇系列文章中简单介绍过，不过这里还是要在唠叨一下 。如上文所说，我司服务端对每一个请求都会验证权限，所以这里我们针对业务封装了一下请求 。首先我们通过拦截器在每个请求头里面塞入token，好让后端对请求进行权限验证 。并创建一个拦截器，当服务端返回特殊的状态码，我们统一做处理，如没权限或者token失效等操作 。
import axios from 'axios'import { Message } from 'element-ui'import store from '@/store'import { getToken } from '@/utils/auth'// 创建axios实例const service = axios.create({baseURL: process.env.BASE_API, // api的base_urltimeout: 5000 // 请求超时时间})// request拦截器service.interceptors.request.use(config => {// Do something before request is sentif (store.getters.token) {config.headers['X-Token'] = getToken() // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改}return config}, error => {// Do something with request errorconsole.log(error) // for debugPromise.reject(error)})// respone拦截器service.interceptors.response.use(response => response,/*** 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中*///const res = response.data;//if (res.code !== 20000) {//Message({//message: res.message,//type: 'error',//duration: 5 * 1000//});//// 50008:非法的token; 50012:其他客户端登录了;50014:Token 过期了;//if (res.code === 50008 || res.code === 50012 || res.code === 50014) {//MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {//confirmButtonText: '重新登录',//cancelButtonText: '取消',//type: 'warning'//}).then(() => {//store.dispatch('FedLogOut').then(() => {//location.reload();// 为了重新实例化vue-router对象 避免bug//});//})//}//return Promise.reject('error');//} else {//return response.data;//}error => {console.log('err' + error)// for debugMessage({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)})export default service