# 微信 H5 登录流程

```plantuml
@startuml
|用户|
start
:访问H5页面;
:点击微信登录;
:处理授权请求;
if (是否同意?) then (是)
  :等待登录结果;
else (否)
  :授权失败;
  end
endif

|H5前端|
:加载页面;
:配置wx.config;
if (配置成功?) then (是)
  :调用wx.login;
  :发送code到后端;
  :等待后端响应;
  if (登录结果?) then (成功)
    :展示用户信息;
  else (禁用)
    :显示禁用提示;
  endif
else (否)
  :显示配置失败;
  end
endif

|微信客户端|
:处理配置请求;
:返回配置结果;
:获取用户授权;
:生成临时code;

|后端服务器|
:接收code;
:换取access_token;
:获取用户信息;
:查询用户状态;
if (用户状态?) then (正常)
  :生成登录态;
else (禁用)
  :返回禁用信息;
endif

|数据库|
:查询用户记录;
:返回用户状态;

@enduml
```

## 流程说明

1. 用户泳道：

   - 访问 H5 页面
   - 点击微信登录按钮
   - 处理授权请求
   - 等待登录结果

2. H5 前端泳道：

   - 加载页面
   - 配置 wx.config
   - 调用 wx.login 获取 code
   - 发送 code 到后端
   - 根据响应显示结果

3. 微信客户端泳道：

   - 处理配置请求
   - 获取用户授权
   - 生成临时 code

4. 后端服务器泳道：

   - 接收 code
   - 换取 access_token
   - 获取用户信息
   - 查询用户状态
   - 生成登录态或返回禁用信息

5. 数据库泳道：
   - 查询用户记录
   - 返回用户状态

## 注意事项

1. code 的有效期很短，通常只有 5 分钟
2. access_token 需要安全存储在后端，避免泄露
3. 建议后端生成自己的登录态 token 返回给前端
4. 需要处理用户拒绝授权的情况
5. 需要处理各种网络异常情况
6. 建议实现静默登录机制，提升用户体验
7. 用户禁用状态应该定期同步和更新
8. 建议在前端缓存用户禁用状态，避免频繁请求
9. 禁用消息提示应该清晰明确，告知用户如何解除禁用