H5 免登实现

本文介绍如何在 H5 应用中实现用户免登录。

实现流程

前端代码

// 页面加载时自动登录
async function autoLogin() {
  try {
    // 1. 获取授权码
    const { code } = await new Promise((resolve, reject) => {
      ImSDK.getAuthCode({
        success: resolve,
        fail: reject
      });
    });

    // 2. 发送到后端换取登录态
    const response = await fetch('/api/auth/im-login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ code })
    });

    const result = await response.json();
    
    if (result.success) {
      // 3. 保存登录态
      localStorage.setItem('token', result.token);
      // 4. 跳转到首页
      window.location.href = '/home';
    }
  } catch (error) {
    console.error('自动登录失败', error);
    // 显示错误提示或降级处理
  }
}

// 页面加载时执行
document.addEventListener('DOMContentLoaded', autoLogin);

后端代码

@PostMapping("/api/auth/im-login")
public Result<LoginVO> imLogin(@RequestBody ImLoginDTO dto) {
    // 1. 使用 code 换取用户信息
    ImUserInfo imUser = imOpenApiClient.getUserByCode(
        dto.getCode(), 
        appId, 
        appSecret
    );
    
    // 2. 查找或创建本地用户
    User localUser = userService.findByImUserId(imUser.getUserId());
    if (localUser == null) {
        // 首次登录，创建用户
        localUser = userService.createFromImUser(imUser);
    }
    
    // 3. 生成本地 Token
    String token = jwtService.generateToken(localUser);
    
    return Result.success(new LoginVO(token, localUser));
}

注意事项

安全提示

• code 只能使用一次，且有效期很短（通常 5 分钟）
• 换取 Token 的操作必须在服务端完成
• 不要在前端暴露 AppSecret