扫码登陆 http
# 思路
```
# 一、生成扫码登录二维码
1 下载qrcode.vue模块，导入QrcodeVue组件，value属性放接口地址
2 watch监控切换 生成新的
# 二、定时器检查是否登录
1 定义类型、和接口
2 组件导入、watch里面：账号登录-取消定时器，扫码登录-定时器请求接口
留心1:200 && 登录成功 调用pinia仓库数据持久化存放用户信息、提示、跳转
留心2：200 && 扫描成功 提示绿色扫描成功
留心3：200 && 取消扫码 提示红色取消扫码
// 情况1：state 200 msg 等待扫码
// 情况2：state 200 msg 扫描成功 （在微信中轻触允许即可登）
// 情况3：state 200 msg 登录成功
// 情况4：state 200 msg 取消扫码
// 情况5：state 400 msg 账号已冻结
```
# 一、动态生成二维码
```
<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() {
var s = [];
var 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] = "-";
var 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>
t = setInterval(() => {
// 参数：state 【必须】全球唯一的登录标识
// 留心：state 是上面uuid()函数生成的
$.post('无接口', {state: state}, res=> {
// 情况1：state 200 msg 等待扫码
// 情况2：state 200 msg 扫描成功 （在微信中轻触允许即可登）
// 情况3：state 200 msg 登录成功
// 情况4：state 200 msg 取消扫码
// 情况5：state 400 msg 账号已冻结
console.log('检查登录状态：', res)
if (res.state == 200 && res.msg == "登录成功")
{
// 清除定时器
clearInterval(t)
// 提示登陆成功
// h5存储
// 重定向跳转
}
}, 'json')
}, 1000)
</script>
```