Vue+nodejs实现一个登录系统(前端篇）

项目地址

页面

随便堆出个页面
我在这用了Ant.d，有表单验证，也能把验证码塞到input框内

关于用户名和密码没什么可说的，前端的重点在验证码部分的实现

验证码

思路：在无登录状态请求一个session接口，由后端返回一个唯一的`sessionid`,在后续请求验证码时把该`sessionid`放入请求头，后端即可把`sessionid`与验证码配对存入redis或db
后端验证码部分使用了svg-captcha来实现，具体实现的在后端部分说。
请求接口后返回到前端的为一个html标签的svg图形，如果单纯的显示验证码，则可以直接把该接口放入``标签的src内，但是通过该方法无法更改请求头的内容，就无法把`sessionid`放入,所以做了以下步骤来实现：

1.将session接口返回的sessionid存入storage;

getSessionId(){
      this.$axios.get('session').then((response) => {
        if(response.data === 200){
          return
        }
        localStorage.setItem("sessionid",response.data)
      })
    }

2.将sessionid加入到请求头中

_axios.interceptors.request.use(
  function(config) {
    axios.defaults.headers.sessionId = localStorage.getItem("sessionid") || "";
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

3.将img标签内的src指向变量（这里名为captchaImage），并在页面拿到sessionid后或点击验证码时调用以下方法，将获取到的svg转换为base64并赋予captchaImage。

getCaptcha(event){
    this.$axios.get('/getCaptcha').then((response) => {
      let a = window.btoa(unescape(encodeURIComponent(response.data)))
      this.captchaImage = 'data:image/svg+xml;base64,' +a
    })
},

这样在每次点击验证码图片时，都会获得新的验证码并在页面中显示。
接下来将用户名、密码、验证码发送给后端就不做赘述了。

---

到此前端部分结束。
后端部分使用nodejs搭建，将写在《Vue+nodejs实现一个登录系统(后端篇）》中，敬请期待。