课程名称:在线办公系统
课程章节: 第1章
课程讲师:神思者
课程内容
在前端页面 设置一个切换 按钮
<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; });}
在UserService.java
接口中声明抽象方法。
public interface UserService { …… public HashMap wechatLogin(String uuid); }
在UserServiceImpl.java
类中实现抽象方法。
@Servicepublic 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); }}