扫码登录 websocket
# 思路
```
# 一、生成扫码登录二维码
1 下载qrcode.vue模块，导入QrcodeVue组件，value属性放接口地址
2 watch监控切换 生成新的
# 二、websocket监控是否登录
1 下载pnpm add socket.io-client@2.2.0模块
2、组件导入、使用
const stateUuid = ref(uuid())
// 1 创建链接：通过socket.io创建socket对象
const socket = io('http://39.107.231.173:3003')
// 2 加入监控：通过socket对象的emit语法，把uuid传递给服务器（标识写join、触发机制-每次生成新的uuid都得推送一次）
// 3 监控后端推送的登录状态
socket.on('islogin', (res: PostLoginResType) => {
console.log('后端返回的数据', res)
const { state, msg, token, username, roleName, avatar } = res
if (state === 200) {
switch (msg) {
case '等待扫码':
break
case '扫描成功':
document.querySelector('h2')!.innerHTML = '<span style="color:green">扫描成功</span>'
break
case '取消扫码':
document.querySelector('h2')!.innerHTML = '<span style="color:red">你已取消此次登录重试</span>'
break
case '登录成功':
socket.emit('leave')
console.log('登录成功：', res)
save(token, username, roleName, avatar)
ElMessage.success(res.msg)
router.push('/')
break
default:
break
}
} else {
ElMessage.error(msg)
}
// ...
})
// 4 退出监控：通过socket对象的emit语法（表示写leave、触发机制-切换到账号登录或者登录成功）
watch(state, () => {
if (state.value) {
// 账号登录
socket.emit('leave')
} else {
// 扫码登录
// console.log(state.value, state.value ? '账号登录' : '扫码登录')
stateUuid.value = uuid()
// 推送给服务器
socket.emit('join', stateUuid.value)
}
})
```
# 一、动态生成二维码
```
<script src="http://unpkg.com/jquery"></script>
<script src="https://unpkg.com/jquery.qrcode@1.0.3/jquery.qrcode.min.js"></script>
<div id="qrcode"></div>
<script>
function uuid() {
const s = [];
const hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
s[8] = s[13] = s[18] = s[23] = "-";
const uuid = s.join("");
return new Date().getTime() + "-" + uuid;
}
// 留心：state位置不能变，qrcode实参的text键要用
const state = uuid();
jQuery("#qrcode").qrcode({
render: "canvas",
foreground: "#000",
background: "#FFF",
text: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxed58e834201d0894&redirect_uri=http://qf.ft.learv.com/qr/login.html&response_type=code&scope=snsapi_base&state=${state}&connect_redirect=1#wechat_redirect`,
});
</script>
```
# 二、检查用户是否扫码授权登陆
```#
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
// 创建 socket 对象
const socket = io("ws://39.107.231.173:3003");
// 首次加入服务器监控队列
// 参数：state 【必须】全球唯一的登录标识
// 留心：state 是上面uuid()函数生成的
socket.emit("join", state);
// 监控服务器推送的登陆信息
// 留心：超过2分钟不扫码登陆二维码就会过期
// 过期推送数据：{meta:{state: 400, msg: "二维码已过期"},data:null}
socket.on("islogin", (res) => {
console.log(res);
// 提示登陆成功
// h5存储
// 重定向跳转
});
</script>
```
标题