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

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

news 来源：原创 2024/9/20 17:25:44

鸿蒙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 })
}

完整项目下载地址