当前位置：首页 > article >正文

鸿蒙Harmony应用开发，数据驾驶舱登录页面的实现

article 2024/9/19 21:49:28

鸿蒙Harmony应用开发，数据驾驶舱登录页面的实现

首先我们有个Splash 过渡页面来判断当前是用户是否登录，我们先从preferences中获取token是否存在。如果不存在直接跳转登录即可，如果存在的情况我们再去获取下用户的信息看看token是否过期.

//Todo  先判断Token是否为空，为空登录 如果不是拿token获取用户信息
UserLoginHelper.getUserToken().then(token => {
  if (token && typeof token === 'string') {
    //判断token是否失效
    UserInfoViewModel.getUserInfo((result) => {
      hideLoadingDialog()
      LogUtils.error("SplashPage", "当前登录信息为:\n" + JSON.stringify(result))
      if (result.data as UserInfoModel) {
        showToast("获取用户信息成功--->---" + result.data.employeeName + "----" + result.data.username)
        setTimeout(() => {
          router.replaceUrl({ url: RoutePath.CockpitPage })
        }, 2000)
      } else {
        LogUtils.error("SplashPage", "Token失效跳转登录.....")
        router.replaceUrl({ url: RoutePath.LoginPage })
      }
    })
  } else {
    LogUtils.error("SplashPage", "未获取到Token跳转登录.....")
    hideLoadingDialog()
    router.replaceUrl({ url: RoutePath.LoginPage })
  }

登录的页面实现

登录页面的UI 很简单2个TextInput，用来输入账号密码，在Button的点击事件中获取TextInput的值作为请求参数

1.获取token

基于前面介绍的网络请求的封装基础之上，我们创建一个 pwdLogin的function，function中将返回一个LoginDataModel的result.

export function pwdLogin(userName: string = "", password: string) {
  return axiosPolarClient.post<LoginDataModel>({
    url: baseUrl + "/login",
    data: { "userName": userName, "password": password },
    showLoading: true,
    isLoginState: true,
    headers: commonHeader
  });
}

在LoginViewModel中创建一个doLogin供LoginPage页面调用

async doLogin(account: string, pwd: string, resultCallback?: ResultCallback<LoginDataModel>) {
  LogUtils.debug('开始doLogin..网络请求:');
  await this.httpRequest(false)
    .promise(pwdLogin(account, pwd), true)
    .then((result) => {
      resultCallback?.(result)
    })
}

在LoginPage页面中doLogin的回调中在调用UserInfoViewModel的getUserInfo

async getUserInfo(resultCallback?: ResultCallback<BaseEntityModel<UserInfoModel>>) {
  await this.httpRequest(false)
    .promise(getLoginUser(), true)
    .then((result) => {
      resultCallback?.(result)
    })
}

完整的调用实现如下:

  Button('登录')
    .width('90%')
    .backgroundColor(0x165dff)
    .opacity(this.account == '' || this.password == '' ? 0.5 : 1)
    .onClick(() => {
      if (this.account == '' || this.password == '') {
        showToast("请输入账号或密码")
        return;
      }
      showLoadingDialog("登录中...")
      if (this.password && this.account) {
        // LogUtils.debug('点击登录');
        let enPwd: string = createEncryPt(this.password);
        LoginViewModel.doLogin(this.account, enPwd/*,VITE_APP_PWD*/, (result) => {
          hideLoadingDialog()
          if (result.code == 200) {
            StorageUtils.put(AUTHORIZATION, result.data)
            UserInfoViewModel.getUserInfo((result) => {
              if (result != null) {
                showToast("登录成功")
                setTimeout(() => {
                  showToast("登录成功");
                  router.replaceUrl({ url: RoutePath.CockpitPage });
                }, 0);
                StorageUtils.put(USERINFO, JSON.stringify(result))
              } else {
                showToast("登录失败" + result)
              }
            })
          } else {
            showToast("登录失败," + result.msg)
          }
        })
      } else {
        // hideLoadingDialog()
        showToast("账号密码不能为空")
      }
    })
    .margin({ top: 30 })
}

完整项目下载地址

查看全文

http://www.kler.cn/news/310976.html