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

47次阅读

共计 1163 个字符,预计需要花费 3 分钟才能阅读完成。

项目地址

页面

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

正文完
 0