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

项目地址

页面

随便堆出个页面
我在这用了Ant.d,有表单验证,也能把验证码塞到input框内
image.png
关于用户名和密码没什么可说的,前端的重点在验证码部分的实现

验证码

思路:在无登录状态请求一个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实现一个登录系统(后端篇)》中,敬请期待。

阅读 1.2k

推荐阅读
旸云写前端
用户专栏

在前端的路上共同努力

2 人关注
5 篇文章
专栏主页