搜索书签后台
引言
后台在vue-admin-template
模板上更改
vue.config.js
- 修改自定义配置中的
tile
- 更改启动开发端口
- 新增
devServer
的host
字段,修改代理配置target
对应的后台接口
登录页
/login
路由,在router/index.js
中对应@/views/login/index
路由
用户名
- 前台先校验,写死在
@/utils/validate.js
的validUsername
方法中,如果需要登录,现在该文件中加一下 - 没调后台的用户唯一性检测接口,用户上,只掉了登录接口
密码
- 前台先校验,只校验了基本长度
登录
- 用到了
el-form
的validate
方法,在表单字段校验结束后调用 - 向
user
模块派发action
,请求登录接口 - 拿到数据后,在
vuex
和本地各存一份
封装的axios
请求拦截,都加上token
1 | config.headers['Authorization'] = 'Bearer ' + getToken() |
并且调整响应拦截器中的错误码为约定好的
登录后
/dashboard
路由,对应@/views/dashboard/index
组件
在前置路由钩子里,获取用户个人信息,及登录跳转逻辑
- 去本地取
token
- 如果有
token
,判断跳转路径是否为/login
- 如果路由是
/login
,则重定向到根路径,不用登录(已经有token
了),并处理加载结束(调用
NProgress`) - 如果路由不是
/login
,取getters
里面取用户信息(登录页登录时,只调了token
的接口)- 如果取到了用户信息,继续往下走
- 没取到用户信息,说明
vuex
里没存过,需要dispatch
去调请求用户信息的接口- 没有获取当前登录管理员的用户名、头像的接口,另起一个
requestFront.js
文件,去调用前台的接口即可 - 之前配置过一次跨域了,以防万一,针对新的请求端口,再配置一项
- 取到用户信息后,存到
vuex
中了 - 如果利用
token
获取头像的接口失败了,说明token
过期了,给个提示然后跳转登录页- 刚好解决了之前,多端登陆,其中一端注销,另一端路由跳转时,应该跳转登录页的处理
- 之前的前台处理,是在
axios
的响应拦截器里,对状态码进行判断,同时为了兼容插件版,对路径做了截取拼接之后再跳转到首页的 - 这里是在前置路由钩子里进行了请求异常处理,如果发生了异常,重置本地
token
,然后跳转重新登录
- 没有获取当前登录管理员的用户名、头像的接口,另起一个
- 如果路由是
- 如果没有
token
- 如果路由在白名单里,继续往下走
- 如果路由不再白名单里,跳转到登录页
- 如果有
更改头像框
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 吕小布の博客!
评论