登录逻辑实现

JWT(json web token)

配置接口

1. 获取验证码接口：获得验证码的code和对应图片数据
2. 登录接口：将验证码的标志code、用户输入的验证码validateCode、用户名account、密码password4个参数提交到后台，获取token。（以上字段均为例子，实际可能不同）

登录页

• 使用验证码接口获得验证码验证标志code和验证码图片数据

• 开发表单：

  1. 将验证码图片在表单中显示出来，实现点击图片更新验证码数据，
  2. 实现account、password、validateCode3个字段供用户输入（一般需要对密码md5加密）
  3. 完成对三个字段的表单提交验证
  4. 提交表单

• 显示登录中状态，登录成功或者失败后恢复，期间禁止重复提交表单

• 成功

  1. 保存token到本地和当前环境
  2. 提示成功信息
  3. 跳转到首页或者根据url的重定向地址跳转

• 失败：显示后台返回的错误信息

管理token的模块

1. 设置一个本地不会重复的token字段名作为本地储存的键名
2. 提供一个方法setAuthorizationCode，可更新本地的token
3. 提供一个方法getAuthorizationCode，可获取本地的token
4. 提供一个方法cleanAuthorizationCode，可删除本地的token

路由守卫

• 不存在token
  • 即将跳转的页面为登录页面：直接跳转
  • 即将跳转的页面为其他页面：重定向到登录页（携带即将跳转的页面地址供登录页重定向）
• 存在token
  • 即将跳转的页面为登录页面：重定向到首页
  • 即将跳转的页面为其他页面：直接跳转

接口使用token

1. 创建请求实例，所有请求通过此实例进行请求，并对此实例进行拦截
2. 拦截实例请求：使用getAuthorizationCode获得最新token，将token填入请求头部：一般为：Authorization:Bearer {token}
3. 拦截实例响应：对响应中的特殊字段进行判断，如登录状态已经失效则使用失效方法跳转至登录页（对此方法判断当前是否是登录页再跳转和实现3s内的防抖防止重复提示和跳转）

vue2和element-ui组合的具体实现