鸿蒙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 })
}
完整项目下载地址
