HarmonyOS 教学实战（四）：登录系统与全局状态管理（像正式 App 一样思考）-育师

如果一个应用没有登录系统，它大概率只是个 Demo。

从这一篇开始，我们的「任务清单 App」正式进入“产品级应用”阶段。

一、真实 App 的登录系统需要解决哪些问题？

很多人写登录，只写了一个页面和一个接口调用，但真实情况远比这复杂：

我们至少要解决👇

用户是否已登录？
Token 存在哪里？
App 重启是否自动登录？
多个页面如何共享登录态？
退出登录如何清理状态？
Token 过期如何处理？

👉 这些问题的答案，都指向：全局状态管理。

二、设计登录系统的整体架构（先别写代码）

三、第一步：定义登录状态模型（AuthModel）

`model/AuthModel.ets`

@ObservedV2exportclassAuthModel{token:string=''userName:string=''isLogin:boolean=falselogin(token:string,userName:string){this.token=tokenthis.userName=userNamethis.isLogin=true}logout(){this.token=''this.userName=''this.isLogin=false}}

教学重点

登录状态 =数据模型
UI 不直接维护登录变量

四、第二步：封装登录服务（网络 + 存储）

`service/AuthService.ets`

importpreferencesfrom'@ohos.data.preferences'importhttpfrom'@ohos.net.http'constTOKEN_KEY='USER_TOKEN'constUSER_KEY='USER_NAME'exportclassAuthService{staticasynclogin(account:string,password:string){consthttpRequest=http.createHttp()constresponse=awaithttpRequest.request('https://example.com/api/login',{method:http.RequestMethod.POST,extraData:{account,password}})constresult=JSON.parse(response.resultasstring)return{token:result.token,userName:result.userName}}staticasyncsaveAuth(token:string,userName:string){constpref=awaitpreferences.getPreferences(getContext(),'auth')awaitpref.put(TOKEN_KEY,token)awaitpref.put(USER_KEY,userName)awaitpref.flush()}staticasyncloadAuth(){constpref=awaitpreferences.getPreferences(getContext(),'auth')consttoken=awaitpref.get(TOKEN_KEY,'')constuserName=awaitpref.get(USER_KEY,'')return{token,userName}}staticasyncclearAuth(){constpref=awaitpreferences.getPreferences(getContext(),'auth')awaitpref.clear()awaitpref.flush()}}

📌 网络、缓存全部在 Service 层
📌 Model 不关心存储细节

五、第三步：全局状态 Store（AppStore）

这是整篇的核心设计。

`store/AppStore.ets`

import{AuthModel}from'../model/AuthModel'import{AuthService}from'../service/AuthService'@ObservedV2exportclassAppStore{auth=newAuthModel()loading:boolean=trueasyncinit(){const{token,userName}=awaitAuthService.loadAuth()if(token){this.auth.login(token,userName)}this.loading=false}asynclogin(account:string,password:string){constresult=awaitAuthService.login(account,password)this.auth.login(result.token,result.userName)awaitAuthService.saveAuth(result.token,result.userName)}asynclogout(){this.auth.logout()awaitAuthService.clearAuth()}}

教学重点（非常重要）

App 启动时只初始化一次
所有页面共享同一个 AppStore
登录 / 退出是统一入口

六、第四步：将 AppStore 变成“全局状态”

使用@Provider / @Consume。

App 根组件（如 Entry）

@ComponentV2 struct AppRoot{@Local store=newAppStore()@Onceasyncinit(){awaitthis.store.init()}build(){if(this.store.loading){Text("初始化中...")}else{if(this.store.auth.isLogin){Index()}else{Login()}}}}

提供全局状态

@Provider appStore:AppStore=this.store

任意页面获取登录态

@Consume appStore:AppStoreText(`你好，${this.appStore.auth.userName}`)

📌 这就是HarmonyOS 的全局状态管理方式

七、第五步：登录页面实现

`pages/Login.ets`

@ComponentV2 struct Login{@Consume appStore:AppStore @Local account:string=''@Local password:string=''build(){Column({space:12}){TextInput({placeholder:'账号'}).onChange(v=>this.account=v)TextInput({placeholder:'密码',type:InputType.Password}).onChange(v=>this.password=v)Button("登录").onClick(async()=>{awaitthis.appStore.login(this.account,this.password)})}.padding(16)}}

八、退出登录怎么做？

在任意页面：

@Consume appStore:AppStoreButton("退出登录").onClick(()=>this.appStore.logout())

UI 会自动切回 Login 页面。

九、Token 如何自动带到请求中？

👉统一在 Service 层处理

headers:{Authorization:`Bearer${appStore.auth.token}`}

📌 不要在 UI 拼 Token
📌 网络层统一处理

十、这一篇你真正学会了什么？

你已经掌握：

✔ 登录系统的完整设计
✔ Token 管理
✔ 自动登录
✔ 全局状态共享
✔ Provider / Consume 用法
✔ 多页面登录态切换

这已经是商业 App 的标准做法。

结语

登录系统不是一个页面，而是一整套状态管理体系。

HarmonyOS 教学实战（四）：登录系统与全局状态管理（像正式 App 一样思考）