使用vue-element开发后台管理系统，简单记录一下，element-admin的文档写的已经很仔细了，一定要好好阅读文档，使用的是admin-template这个基础模板，已经可以满足开发需求，主要是权限控制那部分，也是页面级权限控制，前端写的页面权限表，所以就和elementadmin框架思想实现思路一致了。仔细阅读该框架，代码真心优美流畅，学到很多新姿势技巧，不愧是vue的top1后台管理框架，多多向大神学习。
cd 路径 checkout permission-control分支
整体思路是登录后token保存到cookie，然后拿token获取用户对应的权限维护到vuex里，再动态筛选用户可以加载的权限页面，addRoutes挂载动态路由，左侧的siderbar也是根据vuex内容动态管理的导航栏。在login页面只做获取token操作，并没有顺带再去请求useinfo，相关操作都是在beforeEach拦截器里进行判断的(es6 await写法)
hasPermission这个方法应该默认返回false
plop-templates 创建空模板，npm run new
重点学习了directives的用法，vue用来做按钮级的权限控制方便，强大
vue.config.js
这里主要修改proxy的配置项，来进行代理
devServer: {
port: port,
open: true,
proxy:{
[process.env.VUE_APP_BASE_API]:{
target: 'http://域名/', // 后台接口域名
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
overlay: {
warnings: false,
errors: true
},
// before: require('./mock/mock-server.js')
},
.env.production
# just a flag
ENV = 'production'
# base api
# VUE_APP_BASE_API = '/prod-api'
VUE_APP_BASE_API = ''
这里要注意，修改完之后，最好，重新启动一次项目
正常启动之后，因为关闭了mock，是无法直接登录，进去的，所以我们先掉登录的接口
找到src/api/user.js改成自己的接口地址
export function login(data) {
return request({
url: '/user/login',
method: 'post',
data
})
}
接着找到utils/request.js
这里判断了，token存在的话，将其直接添加到请求头中，当然这里如果在做加密更好
if (store.getters.token) {
// let each request carry token
// ['X-Token'] is a custom headers key
// please modify it according to the actual situation
config.headers['X-Token'] = getToken()
}
request.js中还要将判断的状态码改成真实后端返回的成功状态码，一般都是200
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 5 * 1000
})
最后找到store/modules/user.js
这里是登录的actions，可以看到登录请求回来的是token，然后讲token提交到了SET_TOKEN，后端返回的token如果在data下，则不需要修改，要是数据结构有变化，再进行相应的修改
login({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
login({ username: username.trim(), password: password }).then(response => {
const { data } = response
commit('SET_TOKEN', data.token)
setToken(data.token)
resolve()
}).catch(error => {
reject(error)
})
})
},
以上配置都没有问题，那么登录接口就基本没问题了，不过此时还进不去主页。
这里请求完登录之后，再跳转首页的时候，请求了info接口，因此，还需要一个用户信息的接口，这里只需要讲api/user.js中的user/info接口改成自己的便可，注意前后端字段要对上，如此，便能进入首页。
3.修改页面设置项
找到src/views/settings.js
module.exports = {
title: 'Vue Element Admin', //网站标题
showSettings: true,//是否展示页面设置
tagsView: true,//是否展示标签页
fixedHeader: false,//是否固定头部
sidebarLogo: false,//是否在左侧导航展示logo
supportPinyinSearch: true,
errorLog: 'production'
}