使用Axios请求实现目标效果图：
短信验证码登录
-
校验图形验证码，校验通过
-
发送短信验证码到用户手机上，可通过在线 WebSocket查看：wss://guardian-api.itheima.net/verifyCode
-
根据 手机号 + 短信验证码 实现登录
更新图形验证码
准备一个 @State，用于更新图形验证码
手机号+验证码登录
获取图形验证码
// 校验图形验证码async onGraphicCodeSubmit() {try {// 1. 把手机号，图形验证码发送到后端，校验图形验证码（防机器）await postCodeGraphicCheckAPI({bizType: BizType.PhoneLogin, // 业务类型，1：手机号短信验证码登录phone: this.phoneNumber, // 手机号verifyCode: this.graphicCode // 图形验证码})// 2. 关闭半模态转场this.isShowSheet = false// 3. 清空输入框this.graphicCode = ''// 4. 调用发送短信接口this.onSendSmsCode()} catch (error) {// 刷新验证码this.timestamp = Date.now()}}
// 半模态转场@BuilderSheetBuilder() {Column() {Text('图形验证码').fontSize(16).fontColor($r('app.color.font')).margin({ top: 20, bottom: 50 })
Column({ space: 20 }) {Row({ space: 10 }) {TextInput({ placeholder: '图形验证码' }).fontSize(14).height(42).layoutWeight(1).maxLength(4).onChange((value) => {this.graphicCode = value}).onSubmit(() => {// 提交图形验证码this.onGraphicCodeSubmit()})Image(`${BASE_URL}/code/graphic?phone=${this.phoneNumber}&bizType=${BizType.PhoneLogin}×tamp=${this.timestamp}`).width(108).height(42).objectFit(ImageFit.Contain).onClick(() => {this.timestamp = Date.now()})}
Button("提交").height(42).backgroundColor($r('app.color.brand')).width('100%').enabled(this.graphicCode.length > 0).onClick(() => {// 提交图形验证码this.onGraphicCodeSubmit()})}}.padding({ left: 30, right: 30 }).width('100%').height('100%')}
.bindSheet($$this.isShowSheet, this.SheetBuilder(), {// 半模态转场,屏幕高度一半，无法修改关闭图标样式detents: [SheetSize.MEDIUM],backgroundColor: $r('app.color.white')
})
发送短信验证码
1、发送验证码
2、开始倒计时
3、验证码可以通过接口文档的 WebScoket 测试接口获取，模拟手机收到短信。
可通过 在线 WebSocket 工具，模拟查看验证码信息： 服务连接地址 wss://guardian-api.itheima.net/verifyCode
// 发送短信验证码async onSendSmsCode() {// 发送验证码await postCodeSmsSendAPI({bizType: BizType.PhoneLogin,phone: this.phoneNumber,})// 用户提醒promptAction.showToast({ message: '短信发送到手机上，请注意查收' })// 界面更新倒计时this.startCountDown()}// 开始倒计时startCountDown() {// 初始化倒计时秒数this.count = 120// 关闭旧的定时器clearInterval(this.intervalID)// 开启定时器this.intervalID = setInterval(() => {this.count--if (this.count <= 0) {clearInterval(this.intervalID)}}, 1000)}// 页面销毁，停止倒计时，释放资源aboutToDisappear() {clearInterval(this.intervalID)}登录提交
1、登录成功持久化存储用户信息
2、axios 拦截器添加 token 信息
// 用户信息持久化@StorageLink(LOGIN_INFO) loginInfo: LoginInfoResponse = {}// 登录提交async onLoginSubmit() {const res = await postUserLoginVerifyCodeAPI({phone: this.phoneNumber,verifyCode: this.verifyCode})//promptAction.showToast({ message: '登录成功' })// 更新持久化存储的信息this.loginInfo = res.data.result// 返回上一页router.back()}3、pages/Index.ets 初始化持久化存储
// 持久化存储PersistentStorage.persistProp<PrivacySettings>(PRIVACY_SETTINGS, {})PersistentStorage.pers
