HTML5教程

【备战春招】第15天 扫码登录 前端

本文主要是介绍【备战春招】第15天 扫码登录 前端,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:在线办公系统


课程章节: 第1章


课程讲师:神思者


课程内容



    https://img4.sycdn.imooc.com/63f5642d00017f2304360210.jpg


在前端页面 设置一个切换 按钮

<div class="row"><a class="link" @click="changeMode">二维码登陆</a></div>

https://img2.sycdn.imooc.com/63f5648e00013dbe07080341.jpg

定义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);
    }}

https://img3.sycdn.imooc.com/63f5651c000194aa07180396.jpg






















这篇关于【备战春招】第15天 扫码登录 前端的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!