Vue 3 + Typescript + Vite 基个人网站二维码登录功能

场景描述

现有一需求，需要实现用户扫描二维码即可登录管理后台，常规的登录方式就是使用账号和密码，用户只要输入正确的账号和密码就可以登录，那么个人网站怎么实现呢，简单分析一下就是由服务端签发一个密钥给PC端用于生成二维码，这时我能还不知道谁会扫这个码，由用户主动扫码后携带密钥和谁扫的后服务端通知PC端谁扫了我，知道谁扫了我就可以登录了。这里用户涉及到电脑端、微信小程序由于需要主动推送信息给PC端，PC端拿到谁扫的信息即可实现登录。

如果觉得抽象，可以想象成开房问题。首先让WEB随机生唯一成门牌号，用户扫码得到门牌号，这里不用担心用其他扫描得到门牌号，因为我们只知道门牌号没要钥匙，没有钥匙这是没用的，还不能打开房间的门，当用户扫一扫就拿到门牌号就相当于打电话告诉老板你要这个房间，这时老板也就得到你的信息也就是说谁扫了二维码！好了现在知道是谁了。老板就知道谁要了这个房间然后给他钥匙就可以打开房门！

先看一下效果：

由于需要主动推送信息给pc端，所以用到了WebSocket ，简单介绍一下WebSocket是一种支持双向通讯网络通信协议。

意思就是服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息

属于服务器推送技术的一种.

特点：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据（blob对象或Arraybuffer对象）

（5）收到的数据类型 可以使用binaryType 指定， 显式指定收到的二进制数据类型

（6）没有同源限制，客户端可以与任意服务器通信。

（7）协议标识符是ws（握手http）（如果加密，则为wss（tcp +TLS)），服务器网址就是 URL。

开始今天的教学，首先我们需要生成二维码，第一步安装qrcode

npm i qrcode

安装完毕后在login.vue中import qrcode from 'qrcode'

初始化WebSocket，主要onmessage负责服务端发送过来的密钥key，这里就不多赘述。

var options = new Object() as any;

options.with = 500;

options.height = 500;

qrcode.toCanvas(canvas.value, r.data, options);

那么后端只要是需要支持WebSocket，这里用的ehcache作为缓存60秒

配置缓存，30秒或者60秒这里可根据需要配置，新增一个MyCacheEventListener类继承CacheEventListener，当缓存过期通知Pc端更新二维码。

核心代码参考：

我这里用的是微信小程序（uniapp）参考

小程序效果如下：

更多参考源码端（java）：webosforjava

小程序端源码（Vue3 +Typescript）：webosapp

前端基于（Vue3 + Typescript）：vuewebos