vue2.0项目中使用验证码注册的坑点记录

• 前提：

  • 　　后端配置了CORS跨域，前端axios配置了允许请求携带cookies，即

    const request = axios.create({
      baseURL: process.env.VUE_APP_URL,
      contentType: 'application/json',
      defaults: { withCredentials: true }  //允许请求是携带cookies
    })
    

     

• 注册流程：
  • 1.填写手机号等信息

    2.通过手机号发送验证码

    3.点击注册接口进行注册

 

 

• 坑点：

  • 当你点击验证码按钮发送请求的时候，后端会返回一个cookies，浏览器查看该cookies方式如下

    

    后端验证注册的流程是：

    1.前端发送验证码请求时候，返回一个cookies，就是上图的JSESSIONID字段。之后的请求都会携带这个cookies去请求服务器资源。

    2.前端发送注册请求时候，请求中会携带cookies信息(即这个JSESSION)，后端会去验证这个验证码请求的JSESSION，但是！！！注册请求会产生新的JSESSIONID，所以并不能验证发送验证码请求的和发送注册请求的是用一个用户。

 

• 解决方案
  • 验证码请求时后端返回一个自定义标识字段，注册请求时候传给后端做验证。(感觉是后端的东西，前端一般是添加一个请求可携带cookies字段即可呜呜呜)
  • 后端应该有其他的解决方案的，这个方案感觉有点多步骤。