实现登录逻辑

介绍

登录模块位于 feature/auth，示例里展示了一个最小登录流程：点击按钮 → 发起登录请求 → 更新全局用户状态 → 返回上一页。实际业务只需替换参数和仓库实现即可。

登录流程

1. View 触发 login()。
2. ViewModel 调用仓库发起请求，并通过 RequestHelper 处理结果。
3. 登录成功后更新用户状态并刷新用户信息。
4. 结束时关闭加载态并返回上一页。

View 示例

import { IBestButton } from "ibestui";
import { ColumnBase, MediumPaddingVerticalScroll, P100 } from "designsystem";
import { AppNavDestination } from "ui";
import LoginViewModel from "../viewmodel/LoginViewModel";

/**
 * @file 登录页视图
 */
@ComponentV2
export struct LoginPage {
  /**
   * 登录页 ViewModel
   */
  @Local
  private vm: LoginViewModel = new LoginViewModel();

  /**
   * 构建登录页
   * @returns {void} 无返回值
   */
  build(): void {
    AppNavDestination({
      title: $r("app.string.login_title"),
      viewModel: this.vm
    }) {
      this.LoginContent();
    };
  }

  /**
   * 登录页内容视图
   * @returns {void} 无返回值
   */
  @Builder
  private LoginContent(): void {
    MediumPaddingVerticalScroll() {
      ColumnBase({ widthValue: P100 }) {
        IBestButton({
          text: $r("app.string.login_action"),
          type: "primary",
          buttonSize: "large",
          round: true,
          btnWidth: P100,
          loading: this.vm.isLoginLoading,
          disabled: this.vm.isLoginLoading,
          onBtnClick: (): void => {
            this.vm.login();
          }
        });
      };
    };
  }
}

ViewModel 示例

import { BaseViewModel } from "base";
import { AuthRepository } from "data";
import { Auth, PasswordLoginRequest } from "model";
import { navigateBack } from "navigation";
import { RequestHelper } from "result";
import { getUserState, UserState } from "state";
import { ToastUtils } from "util";

/**
 * @file 登录页 ViewModel
 */
@ObservedV2
export default class LoginViewModel extends BaseViewModel {
  /**
   * 全局用户状态
   */
  private readonly userState: UserState = getUserState();
  /**
   * 认证仓库
   */
  private readonly authRepository: AuthRepository = new AuthRepository();
  /**
   * 登录按钮加载状态
   */
  @Trace
  isLoginLoading: boolean = false;

  /**
   * 执行登录操作
   * @returns {void} 无返回值
   */
  login(): void {
    const params: PasswordLoginRequest = new PasswordLoginRequest(
      "16666666666",
      "123456"
    );
    RequestHelper.repository(this.authRepository.loginByPassword(params))
      .start((): void => {
        this.isLoginLoading = true;
      })
      .execute()
      .then((authData: Auth): void => {
        this.onLoginSuccess(authData);
      })
      .finally((): void => {
        this.isLoginLoading = false;
      });
  }

  /**
   * 登录成功处理
   * @param {Auth} authData - 认证数据
   */
  private async onLoginSuccess(authData: Auth): Promise<void> {
    this.userState.updateAuth(authData);
    this.userState.refreshUserInfo();
    ToastUtils.showSuccess($r("app.string.login_success"));
    navigateBack();
  }
}

注意事项

• 账号与密码为示例数据，实际业务应替换为真实输入。
• 登录成功后统一走 UserState 更新全局信息，避免页面间重复处理。
• 登录按钮需绑定加载态，防止重复提交。