若依框架如何实现微信扫码登录功能？

先说个背景——我和若依框架的“纠结”

说真的， 我那天坐在办公室里喝着凉茶，脑子里一直回荡着一句话：“若依，别再让我抓狂了！”我负责的后端技术栈正好是基于若依框架的，而业务方硬是要给系统加上微信扫码登录。于是我把整个下午都奉献给了 “怎么把微信扫码登录塞进若依” 这件事。

功能设计——两种场景，你选哪个？

在若依里集成微信登录， 大体上要覆盖两类场景：

• 扫码登录用户未登录时通过微信扫码直接登录系统。
• 账号绑定用户已登录系统后 在个人信息页点个按钮弹出二维码，手机微信扫一扫完成绑定。

这俩功能看似简单， 却暗藏无数坑——比如 Redis 临时存储 UUID 的失效时间openid 与系统用户的映射表还有那该死的 跨域回调，痛并快乐着。。

数据库大改过——别忘了加两个字段！

sys_user 表本来只装姓名、密码之类的基础信息。要支持微信登录， 我们必须往里塞两个关键字段：，太暖了。

ALTER TABLE sys_user ADD COLUMN wx_openid VARCHAR DEFAULT NULL COMMENT '微信OpenID';
ALTER TABLE sys_user ADD COLUMN wx_nickname VARCHAR DEFAULT NULL COMMENT '微信昵称';

这一步做好以后就算用户用微信扫二维码，也能在后台把他和已有账号对应起来。

Redis 的“小心机”——UUID 与 OpenID 的桥梁

整个扫码流程核心就在于：

1. PC 端点击「微信登录」按钮 → 后端生成 UUID
2. UUID + QRCode 存入 Redis并返回给前端渲染二维码
3. 手机端扫码后跳转到授权页面 拿到 code
4. /uuid/bind/openid?code=xxx&uuid=yyy 接口把 openid 写入 Redis 对应的 UUID 键值对中
5. PC 端轮询 /uuid/login?uuid=yyy, 若发现 openid，则完成登录并生成 token 返回前端。

抄近道。 ⚠️注意⚠️： Redis key 必须统一前缀，比方说 wx_openid:{UUID}, 否则后面排查日志会头疼死。

代码实现——不讲究排版，只讲究效果！

/uuid/get 接口

@GetMapping
public AjaxResult getUUID throws IOException{
    AjaxResult ajax = AjaxResult.success;
    String uuid = IdUtils.fastSimpleUUID; // 若依自带工具
    String verifyKey = WX_OPENID_KEY + uuid;
    redisCache.setCacheObject;
    ajax.put;
    return ajax;
}

/uuid/bind/openid 接口

@GetMapping
public AjaxResult bindOpenid String code,
                             @RequestParam String uuid) throws IOException{
    AjaxResult ajax = AjaxResult.success;
    // 调用自己封装的获取 openid 方法
    String openid = weChatService.getOpenIdByCode;
    String wxNickName = weChatService.getNicknameByCode;
    String verifyKey = WX_OPENID_KEY + uuid;
    redisCache.setCacheObject;
    ajax.put;
    ajax.put;
    return ajax;
}

@GetMapping
public AjaxResult loginByOpenId String uuid) throws IOException{
    AjaxResult ajax = AjaxResult.success;
    String verifyKey = WX_OPENID_KEY + uuid;
    String openid = redisCache.getCacheObject;
    if{
        SysUser user = userService.selectUserByOpenId;
        if{
            return AjaxResult.error;
        }
        LoginUser loginUser = new LoginUser.toString,
                                            tokenService.createToken,
                                            user,
                                            user.getRoles);
        // 删除缓存防止重复使用
        redisCache.deleteObject;
        ajax.put;
        ajax.put);
        ajax.put;
        return ajax;
    }
    ajax.put; // 未扫描或未绑定
    return ajax;
}

前端 Vue 部分——随手撸一遍就行！🚀🚀🚀

// 获取 UUID
export function getLoginUuid{
   return request;
}
// 用 UUID 去轮询
export function uuidLogin{
   return request;
}
// 绑定 OpenID
export function bindOpenId{
   return request;
}

Login.vue —— 增加一个「微信扫码」按钮和弹窗 👇

   


   

       
       

          二维码已失效， 请点击 
           刷新
       
   

The rest of script section is deliberately “messy”：乱写变量名、随手加 setTimeout、忘记 clearInterval……反正只要能跑起来就行。

噪音小段落——情绪爆发！🤯🤯🤯

"为什么我的代码总是报错？!" 我在键盘上狠狠敲了几下眼泪差点掉下来。其实根本原因是我把 Redis key 写错成了 wx_open_id:, 导致查询不到数据。 一言难尽。 于是我深呼吸三次重新跑了一遍部署脚本，一杯咖啡下肚，又继续折腾。

蚌埠住了... "老板说今天必须交付！" 我心里默念，这句话像是一根针扎在我的灵魂深处。于是我打开 IDE，把所有注释删掉，把所有空格压缩到最小，连变量名都改成了单字符，以求速度。 😅

产品对比表——顺便刷点流量 🚀🚀🚀

常见坑点速查表 📋📋📋 "