上个小节我们在后端生成了二维码图片的Base64字符串，那么这节课我们要在Web页面上切换登陆方式的时候，加载出来这个二维码图片。
一、页面设计
在login.vue页面中定义了一个DIV标签，里面包含的就是显示二维码内容。
<div v-if="qrCodeVisible">
<div class="qrCode-container">
<img :src="qrCode" height="153" class="qrCode" />
<img src="../assets/login/phone.png" height="148" />
</div>
<div class="row"><a class="link" @click="changeMode">用户名密码登陆</a></div>
</div>
在模型层中声明了跟二维码有关的若干变量。qrCodeVisible变量默认为false，也就是说二维码DIV面板默认是不显示的，需要我们手动进行切换。
data: function() {
return {
……,
qrCodeVisible: false,
qrCode: '',
uuid: null,
qrCodeTimer: null,
loginTimer: null
};
},
在登陆页面上有个文字连接，点击这个连接，自动切换二维码面板上。这个文字连接的标签代码如下，需要我们声明点击事件的回调函数。
<div class="row"><a class="link" @click="changeMode">二维码登陆</a></div>
二、切换登陆方式
定义changeMode()函数用来切换登陆面板，其实就是改变qrCodeVisible变量的值。
changeMode: function() {
let that = this;
that.qrCodeVisible = !that.qrCodeVisible;
//加载二维码图片
if (that.qrCodeVisible) {
that.loadQRCode();
//创建刷新二维码定时器，默认为5分钟
that.qrCodeTimer = setInterval(function() {
that.loadQRCode();
}, 5 * 60 * 1000);
//创建轮询定时器，每隔5秒钟发起Ajax请求，检查Redis中UUID对应的值
that.loginTimer = setInterval(function() {
//调用Web方法，检查Redis中UUID对应的值，判定用户是否扫码登陆。该Web方法下面有定义。
that.$http('user/wechatLogin', 'POST', { uuid: that.uuid }, true, function(resp) {
if (resp.result) {
//判定登陆成功就自动销毁两个定时器
clearInterval(that.qrCodeTimer);
clearInterval(that.loginTimer);
//缓存用户权限
let permissions = resp.permissions;
localStorage.setItem('permissions', permissions);
//跳转页面
router.push({ name: 'Home' });
}
});
}, 5000);
} else {
//切换回账户密码登陆，销毁刷新二维码定时器
clearInterval(that.qrCodeTimer);
clearInterval(that.loginTimer);
}
},
//加载二维码图片的封装方法
loadQRCode: function() {
this.$http('user/createQrCode', 'GET', null, true, resp => {
this.qrCode = resp.pic;
this.uuid = resp.uuid;
});
}
三、检查登陆结果
上面浏览器发出的轮询Ajax请求发送给Web方法查询登陆情况，下面咱们把这个Web方法写一下，先从业务层看是写起。在UserService.java接口中声明抽象方法。
public interface UserService {
……
public HashMap wechatLogin(String uuid);
}
在UserServiceImpl.java类中实现抽象方法。
@Service
public class UserServiceImpl implements UserService {
……
@Override
public HashMap wechatLogin(String uuid) {
HashMap map = new HashMap();
boolean result = false;
if (redisTemplate.hasKey(uuid)) {
String value = redisTemplate.opsForValue().get(uuid).toString();
//判断Redis缓存的UUID对应的Value是否为非false，就算用户登陆了
if (!"false".equals(value)) {
result = true;
//删除Redis中的UUID，防止二维码被重刷
redisTemplate.delete(uuid);
//把Value的字符串转换成整数
int userId = Integer.parseInt(value);
map.put("userId", userId);
}
}
map.put("result", result);
return map;
}
}
创建WechatLoginForm.java类，封装浏览器提交的Ajax数据。
@Schema(name = "WechatLoginForm", description = "微信小程序登陆Emos系统Form类")
@Data
public class WechatLoginForm {
@Schema(description = "uuid")
@NotBlank(message = "uuid不能为空")
private String uuid;
}
在UserController.java类中定义Web方法，可以用Swagger测试一下。
@RestController
@RequestMapping("/user")
@Tag(name = "UserController", description = "用户Web接口")
public class UserController {
……
@PostMapping("/wechatLogin")
@Operation(summary = "微信小程序登陆")
public R wechatLogin(@Valid @RequestBody WechatLoginForm form) {
HashMap map = userService.wechatLogin(form.getUuid());
boolean result = (boolean) map.get("result");
if (result) {
int userId = (int) map.get("userId");
StpUtil.setLoginId(userId);
Set<String> permissions = userService.searchUserPermissions(userId);
map.remove("userId");
map.put("permissions", permissions);
String token=StpUtil.getTokenInfo().getTokenValue();
map.put("token",token);
}
return R.ok(map);
}
}