Vue+nodejs實現一個登陸系統(前端篇）

項目地址

頁面

隨便堆出個頁面
我在這用了Ant.d，有表單驗證，也能把驗證碼塞到input框內

關於用戶名和密碼沒什麼可說的，前端的重點在驗證碼部分的實現

驗證碼

思路：在無登陸狀態請求一個session接口，由後端返回一個惟一的`sessionid`,在後續請求驗證碼時把該`sessionid`放入請求頭，後端便可把`sessionid`與驗證碼配對存入redis或db
後端驗證碼部分使用了svg-captcha來實現，具體實現的在後端部分說。
請求接口後返回到前端的爲一個html標籤的svg圖形，若是單純的顯示驗證碼，則能夠直接把該接口放入`<img>`標籤的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實現一個登陸系統(後端篇）》中，敬請期待。