27.阳光沙滩-vue移动端-登录接口更新

0.前言-迟到的更新

体验地址：http://sob.webapp.52android.cn:8001（域名来自a lonely cat） 很久没有动过这个vue了，工作忙了一些。

前段时间，sob登录不上了，是因为cookie无法携带过去，因此康师傅进行了接口的更新。

详情看：https://www.sunofbeach.net/a/1476738866298781698

我给大家直接总结下作了哪些变化：

• api域名发生了变化

  以前是https://api.sunofbeach.net,现在换成了https://api.sunofbeaches.com

  所以这个baseurl是必须更换

• 登录时验证码的验证方式

  以前是将一个值放在cookie中，类似于sessionid的东西，这个sessionid对应着发送给你的验证码，现在cookie传递不了。于是这个值放在了header中。key为 l_c_i，访问登录接口时需要在header上加上他

• token的携带方式

  以前token我们是不进行存储的，为啥，因为他也是放在cookie中，而浏览器访问时会默认携带cookie，所以不需要存储。

  现在cookie传递不了，需要将token放在请求头中，key为 sob_token

• 验证码图片的展示方式

  以前我们是直接用 src = api地址 这种方式来获得验证码。浏览器解析标签时，会自动发起一个get请求，得到图片。

  现在我们需要拿到，和验证码一起返回的响应头，那就不能让浏览器来发起请求，需要我们手动发起请求，并且自己从响应头中取出 l_c_i这个东西，然后把这个图片展示到标签中。

  这部分康师傅给出了具体的代码。

1.修改

从上面的分析，可以得知，我们需要改动以下部分的代码：

• api域名

  这个很简单，我们之前把域名放到了 src/api/ajax.js 里面

  直接把变量内容改变

  let BASE_URL='https://api.sunofbeaches.com' //阳光沙滩api接口地址
  

• 配置axios的请求拦截和响应拦截

  请求拦截，就是说每次发请求之前，我要给你加点东西，这里我们要加的就是请求头

  响应拦截，就是每次得到响应的时候，我要提前从响应中取出点什么，这里我们就是要从响应头中取出sob_token。

  我们到main.js中进行修改

  下面看代码：

  import axios from "axios";
  
  axios.defaults.withCredentials = true; //配置为true
  //配置axios的拦截器
  //请求拦截器
  axios.interceptors.request.use(function (request) {
    //发送请求之前，把 token 和 lci 带上，放在请求头中
    let captchaKey = localStorage.getItem("l_c_i")
    let sobToken = localStorage.getItem("sob_token")
  
    //添加请求头
    request.headers.l_c_i = captchaKey;
    request.headers.sob_token = sobToken;
  
    return request;
  });
  
  
  //响应拦截器
  axios.interceptors.response.use(
    response => {
        //拦截响应，做统一处理
        //只要响应中有 lci 和sob_token，就存入本地
        if ( response.headers.sob_token) {
  
            //这里只存储了sobtoken，为啥，因为lci 那个请求是通过fetch发起的，和axios没有关系
            localStorage.setItem("sob_token", response.headers.sob_token)
  
        }
        return response
    }
  )
  

  关于存储部分，我直接将两个变量值存储到了localstorage中。

  这样，token的存储和携带，以及l_c_i的携带问题就解决了

• 验证码的展示

  因为不能直接用url来展示验证码了，需要修改。主要参考康师傅的文章来写的。

  改动如下：

  • img标签不再使用src属性，并且添加一个id，点击事件换成验证码加载的方法

  <img class="captchaImg" id="captcha" @click="loadCaptcha" alt="">
  

  • 创建一个loadCaptcha方法用于加载验证码

    /**
               * 加载验证码
               */
              loadCaptcha() {
                  //每次刷新验证码，就是把code变化，然后发起请求
                  this.randomCode = parseInt(Math.random() * (10000 - 1 + 1) + 1, 10);
  
                  //这里使用原生的fetch来发起请求
                  fetch(this.captchaUrl + this.randomCode).then((response) => {
                      //获取到key
                      let l_c_i = response.headers.get("l_c_i");
                      //存储到localstorage中，用于axios发起请求时拦截器的添加header
                      localStorage.setItem("l_c_i", l_c_i);
  					//这里首先拿到响应的 blob数据，其实就是图片数据，然后设置到img标签中
                      //这里是通过id来找到验证码的dom元素
                      response.blob().then(function (myBlob) {
                          const urlCreator = window.URL || window.webkitURL;
                          document.getElementById("captcha").src = urlCreator.createObjectURL(myBlob);
                      });
                  });
              }
  

  • 在mounted中调用loadCaptcha方法

2.最终效果