引言

后台在vue-admin-template模板上更改

vue.config.js

  • 修改自定义配置中的tile
  • 更改启动开发端口
  • 新增devServerhost字段,修改代理配置target对应的后台接口

登录页

/login路由,在router/index.js中对应@/views/login/index路由

用户名

  • 前台先校验,写死在@/utils/validate.jsvalidUsername方法中,如果需要登录,现在该文件中加一下
  • 没调后台的用户唯一性检测接口,用户上,只掉了登录接口

密码

  • 前台先校验,只校验了基本长度

登录

  • 用到了el-formvalidate方法,在表单字段校验结束后调用
  • 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
      • 如果路由在白名单里,继续往下走
      • 如果路由不再白名单里,跳转到登录页

更改头像框