UniApp多平台登录状态同步方案讲座

欢迎来到“技术下午茶” 🍵

大家好，欢迎来到今天的“技术下午茶”，我是你们的讲师 Qwen。今天我们要聊的是一个非常实用的话题——UniApp 多平台登录状态同步方案。如果你正在开发一个跨平台的应用，并且希望用户在不同平台上都能保持一致的登录状态，那么这篇文章绝对适合你！我们将会用轻松诙谐的语言，结合代码和表格，带你一步步理解如何实现这个功能。

1. 为什么需要多平台登录状态同步？

想象一下，你在手机上打开一个应用，登录了账号，然后切换到平板或电脑上继续使用。如果你每次都要重新登录，是不是会觉得特别麻烦？尤其是在一些社交类、电商类应用中，用户可能会频繁在不同设备之间切换。为了提升用户体验，我们必须确保用户的登录状态在多个平台上是同步的。

2. 多平台登录状态同步的核心问题

要实现多平台登录状态同步，我们需要解决以下几个核心问题：

如何存储用户的登录信息：登录信息通常包括 token、用户 ID 等。这些信息需要在不同平台上都能访问。
如何确保登录状态的一致性：当用户在一个平台上登出时，其他平台上的登录状态也应该同步更新。
如何处理跨平台的网络请求：不同平台可能有不同的网络环境和安全策略，如何确保请求的安全性和一致性？

3. 解决方案概述

我们可以将解决方案分为三个步骤：

统一的登录认证服务：通过一个集中式的服务器来管理用户的登录状态。
跨平台的存储机制：使用 UniApp 提供的 API 来存储和读取用户的登录信息。
实时同步机制：通过 WebSocket 或轮询等方式，确保不同平台之间的登录状态能够实时同步。

4. 统一的登录认证服务

首先，我们需要一个统一的登录认证服务。这个服务可以基于 OAuth 2.0 或 JWT（JSON Web Token）来实现。JWT 是一种轻量级的令牌格式，非常适合用于跨平台的身份验证。

JWT 的工作原理

用户在某个平台上登录后，服务器会生成一个 JWT 令牌并返回给客户端。
客户端将这个 JWT 令牌存储在本地（例如 localStorage 或 uni.setStorageSync）。
在后续的请求中，客户端会将 JWT 令牌附加到请求头中，服务器可以通过解码 JWT 来验证用户的身份。

// 登录接口示例
async function login(username, password) {
  const response = await uni.request({
    url: 'https://api.example.com/login',
    method: 'POST',
    data: { username, password }
  });

  if (response.statusCode === 200) {
    const { token } = response.data;
    // 将 token 存储到本地
    uni.setStorageSync('token', token);
    console.log('登录成功，token 已保存');
  } else {
    console.error('登录失败');
  }
}

使用 JWT 的优点

无状态：服务器不需要存储用户的会话信息，减少了服务器的负担。
跨平台：JWT 可以轻松地在不同平台上使用，只要客户端能够解析和发送 JWT 即可。
安全性：JWT 可以通过签名来保证数据的完整性，防止篡改。

5. 跨平台的存储机制

UniApp 提供了多种存储方式，常见的有 uni.setStorageSync 和 uni.getStorageSync，它们可以在不同的平台上无缝工作。对于登录状态的存储，我们可以选择将 JWT 令牌存储在本地存储中。

代码示例

// 存储 token
function saveToken(token) {
  uni.setStorageSync('token', token);
}

// 获取 token
function getToken() {
  return uni.getStorageSync('token') || null;
}

// 检查是否已登录
function isLoggedIn() {
  return !!getToken();
}

表格：不同平台的存储方式

平台	存储方式	说明
H5	localStorage	浏览器的本地存储
微信小程序	wx.setStorageSync	小程序的本地存储
App	AsyncStorage	移动应用的本地存储

6. 实时同步机制

为了让不同平台之间的登录状态保持一致，我们需要引入实时同步机制。这里有两个常见的方案：

WebSocket：通过 WebSocket 实现实时通信，当用户在一个平台上登出时，服务器可以立即通知其他平台。
轮询：每隔一段时间向服务器发送请求，检查是否有新的登录状态变化。

WebSocket 示例

// 初始化 WebSocket 连接
function initWebSocket() {
  const socket = new WebSocket('wss://api.example.com/ws');

  socket.onmessage = (event) => {
    const message = JSON.parse(event.data);

    if (message.type === 'logout') {
      // 收到登出消息，清除本地 token
      uni.removeStorageSync('token');
      console.log('收到登出通知，已清除本地 token');
    }
  };

  socket.onclose = () => {
    console.log('WebSocket 连接已关闭');
  };
}

轮询示例

// 每隔 5 分钟检查一次登录状态
function startPolling() {
  setInterval(async () => {
    try {
      const response = await uni.request({
        url: 'https://api.example.com/check-login-status',
        method: 'GET'
      });

      if (response.data.loggedOut) {
        // 如果服务器返回已登出，清除本地 token
        uni.removeStorageSync('token');
        console.log('检测到用户已登出，已清除本地 token');
      }
    } catch (error) {
      console.error('检查登录状态失败', error);
    }
  }, 5 * 60 * 1000); // 5 分钟
}

7. 处理跨平台的网络请求

不同平台的网络环境和安全策略可能有所不同，因此我们需要确保网络请求在所有平台上都能正常工作。UniApp 提供了 uni.request API，它可以在 H5、微信小程序、App 等平台上无缝使用。

请求拦截器

为了简化代码逻辑，我们可以使用请求拦截器来处理所有的网络请求。拦截器可以在请求发送前和响应接收后进行一些操作，比如添加 JWT 令牌、处理错误等。

// 请求拦截器
uni.addInterceptor('request', {
  invoke(args) {
    // 在请求头中添加 token
    const token = getToken();
    if (token) {
      args.header = {
        ...args.header,
        Authorization: `Bearer ${token}`
      };
    }
  },
  success(result) {
    // 处理成功的响应
    if (result.statusCode === 401) {
      // 如果返回 401，表示 token 无效，清除本地 token
      uni.removeStorageSync('token');
      console.log('Token 无效，已清除');
    }
  },
  fail(error) {
    // 处理请求失败的情况
    console.error('请求失败', error);
  }
});

8. 总结与展望

通过今天的讲座，我们了解了如何在 UniApp 中实现多平台登录状态同步。关键点在于：

使用 JWT 实现统一的登录认证服务。
利用 UniApp 提供的存储 API，在不同平台上存储和读取登录信息。
通过 WebSocket 或轮询实现实时同步，确保不同平台之间的登录状态一致。
使用请求拦截器简化网络请求的处理逻辑。

当然，这只是一个基础的实现方案。根据实际项目的需求，你还可以进一步优化，比如引入更多的安全措施、支持更多平台等。希望今天的分享对你有所帮助，如果你有任何问题，欢迎在评论区留言讨论！😊

9. 课后作业

为了巩固今天学到的知识，建议你尝试完成以下任务：

在你的 UniApp 项目中实现 JWT 登录认证。
使用 uni.setStorageSync 和 uni.getStorageSync 存储和读取登录信息。
实现一个简单的 WebSocket 或轮询机制，确保不同平台之间的登录状态同步。

祝你编码愉快，下次见！👋