💓 酷库 - 后台开发前端脚手架
后台开发若有一个现成的成熟的脚手架，事半功倍。
vue-element-admin
github: https://github.com/PanJiaChen/vue-element-admin
非常强大，内置了不少后台常用组件，拿来即用。
有些臃肿…
取消默认的 mock，使用反向代理
- 在 vue.config.js devServer 中删除 before，加入 proxy 即可
- 注意 development 模式，默认请求会加上 /dev-api 前缀，在 .env.development 中设置
———— 手动间隙 ————
修改统一的接口请求设置
- 默认有响应拦截，会判断若 res.data.code 只要不是 20000 就会报错，如下图
- 实际使用时，这里的逻辑肯定要改掉，可以删除拦截，或改成自己应用的状态码进行判断
- 下图的代码 /src/utils/request.js
———— 手动间隙 ————
登录逻辑
修改 src/api/user.js 中的 login 方法的接口地址（这里接口必须返回用户身份标识 token）
修改 src/store/modules/user.js 中的 actions.login 函数（主要是统一 key 值，如下图）
———— 手动间隙 ————
进页面时的登录状态验证
具体代码在 src/permission.js router.beforeEach 函数中（下图1）
简单来说就是判断是否有 token 来确认是否登录（token 在 store user 模块中）
若没登录，则判断当前页面是否要登录后才可访问（下图2，whiteList 中的路径不需要登录后访问）
若需要登录，则重定向到登录页面
若不需要，则继续正常访问
———— 手动间隙 ————
管理员身份权限管理
具体代码在 src/permission.js router.beforeEach 函数中
在页面切换的时候，若无管理员身份信息（store user/roles）
会重新通过接口获取（actions user.getInfo）
getInfo 应该返回一个权限数组
之后根据用户权限（roles）和预先定义的动态路由（/router/index.js 中的 asyncRoutes）
使用 router.addRoutes 动态注册路由
若项目中只有一种管理员身份，这里直接写死就好，不用走接口，如下图
vue-admin-template
github: https://github.com/PanJiaChen/vue-admin-template
vue-element-admin 的精简版本，没有内置常用组件。
使用方法也类似，去看上面文档吧
推荐使用这个精简版本，需要什么组件可以从 vue-element-admin 中扒