一、创建共享登录用户信息数据的类定义

model/LoginModel.ets

export interface UserInfo {
  name: string;
  phone: string;
  email: string;
  avatar: ResourceStr;
  loginType: 'qq' | 'wechat' | 'account' | null;
  isVip: boolean;
}

@ObservedV2
export class UserStore {
  @Trace userInfo: UserInfo = {
    name: '',
    phone: '',
    email: '',
    avatar: '',
    loginType: null,
    isVip: false
  }
  @Trace isLoggedIn:boolean = false
}

二、创建全局管理器

pages/utils/LoginStateManager.ets

import { AppStorageV2 } from '@kit.ArkUI';
import { UserInfo, UserStore } from '../../model/LoginModel';

class LoginManager {
  globalUserStore = AppStorageV2.connect(
    UserStore,
    'GLOBAL_USER_STORE',
    () => new UserStore()
  )!;

  setUserInfo(userInfo: UserInfo): void {
    this.globalUserStore.userInfo = userInfo
  }

  getUserInfo(): UserInfo {
    return this.globalUserStore.userInfo;
  }

  setLoginStatus(status: boolean): void {
    this.globalUserStore.isLoggedIn = status
  }

  isLoggedIn(): boolean {
    return this.globalUserStore.isLoggedIn
  }

  logout(): void {
    this.globalUserStore.userInfo = {
      name: '',
      phone: '',
      email: '',
      avatar: '',
      loginType: null,
      isVip: false
    };
    this.globalUserStore.isLoggedIn = false
  }
}
// 导出登录管理器 如果有地方要用管理器的方法就直接调用即可
export const loginManager = new LoginManager()

三、页面使用:举例登录页使用

import router from '@ohos.router';
import { LoginType, UserStore } from '../../model/auth/LoginModel';
import { UserInfo, UserInfoResp } from '../../api/feeding/user/type';
import { AppStorageV2 } from '@kit.ArkUI';
import { loginManager } from '../manager/LoginStateManager';
import { reqHuaweiLogin, reqQQLogin, reqWXLogin } from '../../api/sys/user';
import { reqEditUserInfo, reqUserInfo } from '../../api/feeding/user';
import { qqMock, wxMock } from '../../mock/user/Login';
import { HarmonyUserInfoType, LoginRespType, ReqLoginParams } from '../../api/sys/user/type';
import { GlobalLoading } from '../components/LoadingDialog';
import { DialogInfo } from '../../model/mine/CustomerDialogModel';
import { loadingManager } from '../manager/LoadingManager';
import { shaEncryptSync } from '@abner/security';
import { MobUtils, wxLoginUserInfoType } from '../utils/MobUtils';
import { toast } from '@abner/dialog';
import mobShare from '@zztsdk/sharesdk';
import { url } from "@kit.ArkTS";
import { MD5Util } from '../utils/MD5Util';

@Builder
export function LoginPageBuilder() {
  LoginPage();
}

const APPID = '10QHgjGCgVJz1111111V'

@ComponentV2
export struct LoginPage {
  // 是否同意协议
  @Local isAgreed: boolean = false;
  // 页面跳转
  pathStack: NavPathStack = AppStorageV2.connect(NavPathStack, 'pathStack', () => new NavPathStack())!;
  // 控制弹窗是否渲染
  @Local showDialog: boolean = false;
  @Local dialogTitle: string = '请先登录';

  // 加密
  getSign(params:Record<string,string>){
    const sign = new url.URLParams(params)
    console.error(`getSign: ${sign} `);
    let sha1 = shaEncryptSync(sign.toString(),'SHA1')
    console.error("===getSign:" + sha1)
    // 创建 SHA1 哈希对象
    return sha1
  }


 private async wechatLogin() {
    if (!this.isAgreed) {
      this.dialogTitle = '请阅读并同意用户协议和隐私政策';
      this.show();
      return;
    }

    // const loginRes: LoginRespType = await reqWXLogin(wxMock);
    // let userInfoRes = await reqUserInfo(loginRes.data.user_id!);
    // // 4. 保存用户信息
    // const userInfo = loginManager.convertApiUserInfo(
    //   userInfoRes.data,
    //   LoginType.WX,
    // );
    //
    // loginManager.setUserInfo(userInfo);
    // loginManager.setLoginStatus(true);
    // // 跳转
    //         this.pathStack.replacePathByName('BabyManagement', { fromLogin: true }, false);
    //         toast('登录成功')

    try {
      this.isLoading = true
      // 关键修改:使用 MobUtils 触发授权
      MobUtils.mobLogin(MobUtils.MOB_WX, {
        onSuccess: () => {
          // 成功回调
        },
        onFail: (error) => {
          // 失败回调
          console.error('Login failed:', error);
          toast('登录失败请重试 failed')
        },
        onCancel: () => {
          // 取消回调
          console.log('Login cancelled');
          toast('用户取消登录 cancelled')
        },
        onSuccessMap: async (userData: wxLoginUserInfoType) => {
          console.info(`oxyc _ ${JSON.stringify(userData)}`)
          try {
            // 1. 转换第三方数据为 ReqLoginParams
            const reqParams = await this.convertWxToReqLoginParams(userData);

            // 2. 调用登录接口
            const loginRes: LoginRespType = await reqWXLogin(reqParams);
            const userId = loginRes.data.user_id!;

            // 3. 获取用户详情
            let userInfoRes = await reqUserInfo(MD5Util.generateAccountSync(loginRes.data.nickname ||  loginRes.data.user_id?.toString() || '当前用户'));

            userInfoRes = await this.asyncUserInfo(userInfoRes,reqParams,userId)
            // 4. 保存用户信息
            const userInfo = loginManager.convertApiUserInfo(
              userInfoRes.data,
              LoginType.WX,
              reqParams.sign
            );

            loginManager.setUserInfo(userInfo);
            loginManager.setLoginStatus(true);

            console.log('========Login==========' + userInfo)


            // 跳转
            this.pathStack.replacePathByName('BabyManagement', { fromLogin: true }, false);
            toast('登录成功')
          } catch (error) {
            console.error('微信登录失败:', error);
            this.dialogTitle = '登录失败,请重试';
            this.show();
          }
        }
      });
    } catch (error) {
      console.error('微信登录流程失败:', error);
      this.dialogTitle = '登录失败,请重试';
      this.show();
    } finally {
      this.isLoading = false
    }
  }

  build() {
    NavDestination() {
      Stack(){
        Column() {
         
          }
          .width('100%')
          .height('38%')
          .alignItems(HorizontalAlign.Center);
        }
        .width('100%')
        .height('100%')
        .backgroundColor('#FFF7E6')
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);
        }
      }
    }
    .hideTitleBar(true)
    .onReady((context: NavDestinationContext) => {
      this.pathStack = context.pathStack;
    });
  }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐