微信小程序登录授权流程

微信小程序登录授权流程：wx.login、getUserInfo 与本地缓存

小程序登录要解决什么问题

小程序里用户进入页面时，前端并不知道用户在业务系统里的身份。常见流程是：

1. 用户点击授权按钮。
2. 前端拿到 encryptedData 和 iv。
3. 调用 wx.login 获取临时 code。
4. 把 code、encryptedData、iv 发给后端。
5. 后端解析微信用户信息并返回业务用户数据。
6. 前端把用户数据存到本地缓存。

这个项目就是按照这个流程做的。

登录页里的核心逻辑

代码位置：pages/login/login.js。

授权按钮触发 getUser(res)，里面先取：

let encryptedData = res.detail.encryptedData;
let iv = res.detail.iv;

然后调用：

wx.login({
  success: function (res) {
    let code = res.code;
  }
})

拿到 code 后，请求后端解析微信用户：

app.req.get('/wechat/analysis_wechat_user.do', {
  encryptedData,
  iv,
  code
}, callback)

请求成功后保存用户信息：

wx.setStorageSync('cardUserInfo', res.data.data);

这个 cardUserInfo 就是后面很多页面判断登录态的依据。

页面里如何判断是否登录

很多页面的 onShow 中都有类似逻辑：

1. 调用 wx.getSetting 看用户是否授权。
2. 如果没有授权，跳转到登录页。
3. 如果授权了，再从本地缓存取 cardUserInfo。
4. 如果没有 userId，也跳转登录页。

这说明项目里登录态判断分为两层：

• 微信授权层：用户有没有允许获取信息。
• 业务用户层：本地有没有后端返回的用户数据。

这个写法的优点

优点是清晰，页面进入前都会主动检查用户状态。对于积分商城、抽奖、问卷这些需要用户身份的功能来说，这是必要的。

否则用户没有登录就去抽奖或兑换商品，后端无法知道是谁在操作。

可以改进的地方

现在回头看，重复判断登录态的代码比较多。几乎每个需要登录的页面都写了一遍 wx.getSetting 和 wx.getStorageSync。

如果项目继续维护，可以抽一个公共方法：

function requireLogin() {
  // 检查授权和 cardUserInfo
}

然后每个页面只调用这一句。这样以后登录逻辑变了，只改一个地方。

另外，旧版本小程序的 getUserInfo 授权方式现在已经发生过变化，真实项目升级时需要根据当前微信官方能力调整。

理解这条链路之后，再看登录、缓存、页面拦截，就不会觉得零散了。