Vuenodejs实现一个登录系统前端篇

jiezi

5 年前

随便堆出个页面
我在这用了 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 实现一个登录系统(后端篇）》中，敬请期待。

项目地址

页面

验证码