UniApp 小程序端登录流程：静默登录、授权与 Session 管理

在移动互联网时代，用户体验至关重要。对于 UniApp 开发者而言，小程序端的登录流程设计不仅关乎用户体验，更直接影响到数据安全与业务逻辑的稳定性。一个优秀的登录系统应当做到“无感”与“安全”并存。本文将深入探讨 UniApp 小程序端的登录流程，涵盖静默登录、用户授权以及 Session 管理三大核心环节，帮助你构建一套流畅且可靠的认证体系。

为什么小程序登录如此特殊？

与传统的 Web 应用不同，小程序运行在微信、支付宝等超级 App 的沙箱环境中。它无法直接使用 Cookie 或 LocalStorage 来维持会话，也不能随意弹出账号密码输入框。因此，小程序的登录流程必须依赖平台提供的开放能力，例如微信的 wx.login 接口和 open-type="getUserInfo" 按钮。

在 UniApp 中，虽然你使用 Vue 语法编写代码，但最终编译到小程序平台时，依然需要遵循小程序的底层规范。理解这一点，是设计登录流程的前提。

第一步：静默登录——获取用户唯一标识

静默登录是指在不打扰用户的情况下，通过小程序 API 获取用户的临时登录凭证（code），并以此换取服务端的 Session。这是整个登录流程的基石。

核心流程

1. 前端调用 uni.login()：在 UniApp 中，使用 uni.login() 获取 code。该接口会返回一个临时的 code，有效期仅五分钟。
2. 发送 code 到后端：将 code 发送给开发者服务器。
3. 后端换取 openid 和 session_key：后端使用 code 加上 AppID 和 AppSecret，调用微信的 code2Session 接口，换取用户的 openid 和 session_key。
4. 生成自定义 Session：后端根据 openid 生成一个自定义的登录态（例如 token），并返回给前端。

代码示例

// 静默登录
async function silentLogin() {
  try {
    const loginRes = await uni.login({ provider: 'weixin' });
    const { code } = loginRes;
    
    // 发送 code 到后端
    const res = await uni.request({
      url: 'https://your-api.com/login',
      method: 'POST',
      data: { code }
    });
    
    // 存储后端返回的 token
    uni.setStorageSync('token', res.data.token);
    return res.data.token;
  } catch (error) {
    console.error('静默登录失败', error);
    throw error;
  }
}

静默登录的优势在于用户毫无感知，适合在 App 启动时自动执行。但此时我们只拿到了用户的 openid，并未获得用户的头像、昵称等公开信息。

第二步：用户授权——获取公开信息

如果业务需要展示用户昵称或头像，就需要引导用户进行授权。需要注意的是，微信小程序对用户信息的获取策略在不断收紧。目前推荐的做法是使用 button 组件的 open-type="getUserInfo" 或 wx.getUserProfile（后者已逐步被废弃，建议使用头像昵称填写能力）。

授权流程

1. 展示授权按钮：在需要用户信息的页面，放置一个按钮，设置 open-type="getUserInfo"。
2. 用户点击并同意：用户点击按钮后，会弹出授权窗口。
3. 获取加密数据：授权成功后，会返回 encryptedData 和 iv。
4. 后端解密：将加密数据发送到后端，结合 session_key 进行解密，获取用户信息。

注意事项

• 不要强制授权：强制授权会导致用户反感，甚至被平台处罚。应在必要时才请求。
• 使用头像昵称填写能力：对于新项目，建议使用微信提供的头像昵称填写组件，让用户主动选择。
• UnionID 机制：如果企业有多个小程序或公众号，建议使用 UnionID 来统一用户身份。

第三步：Session 管理——维持登录态

获取到自定义 token 后，如何管理这个 Session 就成为关键。小程序没有 Cookie，因此我们需要手动将 token 存储在本地，并在每次请求时携带。

存储与携带

• 存储：使用 uni.setStorageSync('token', token) 将 token 存入本地缓存。
• 携带：在 uni.request 的拦截器中，统一为请求头添加 Authorization 字段。

封装请求拦截器

// 请求拦截器
uni.addInterceptor('request', {
  invoke(args) {
    const token = uni.getStorageSync('token');
    if (token) {
      args.header = {
        ...args.header,
        'Authorization': `Bearer ${token}`
      };
    }
  }
});

Token 过期处理

Token 通常有有效期。当后端返回 401 状态码时，表示 token 已过期。此时应触发重新登录流程：

1. 清除本地 token。
2. 重新执行静默登录。
3. 重试失败的请求。

为了避免并发请求同时触发多次登录，可以使用一个 isRefreshing 标志位或 Promise 队列来保证只刷新一次。

完整登录流程图

为了更直观地理解，以下是完整的登录流程：

1. App 启动 → 检查本地 token 是否存在且有效。
2. 若无效 → 执行静默登录 → 获取新 token。
3. 若需要用户信息 → 引导用户授权 → 更新用户资料。
4. 后续请求 → 自动携带 token → 后端验证。
5. 若 token 过期 → 清除 token → 重新静默登录 → 重试请求。

常见问题与最佳实践

• Session_key 过期：微信的 session_key 可能失效，导致解密失败。此时应重新执行 uni.login。
• 多端兼容：UniApp 支持多端，登录逻辑需考虑 H5、App 等平台的差异。建议使用条件编译。
• 安全性：不要将 session_key 传到前端，所有敏感操作应在后端完成。
• 用户体验：静默登录应尽量快，避免阻塞页面渲染。可以使用骨架屏或加载动画。

总结

UniApp 小程序端的登录流程是一个环环相扣的系统工程。静默登录负责“无感”获取身份，用户授权负责“按需”获取信息，Session 管理负责“持续”维持状态。三者结合，才能打造出既安全又流畅的用户体验。

在实际开发中，建议将登录逻辑封装成独立的模块，便于维护和复用。同时，密切关注微信官方文档的更新，因为平台政策的变化可能会直接影响你的登录策略。希望本文能为你提供清晰的思路，助你构建出优秀的小程序应用。

未经允许不得转载：任鹏个人博客 » UniApp 小程序端登录流程：静默登录、授权与 Session 管理