后台开发若有一个现成的成熟的脚手架,事半功倍。
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 中扒