如果一个应用没有登录系统，它大概率只是个 Demo。
从这一篇开始，我们的「任务清单 App」正式进入“产品级应用”阶段。
一、真实 App 的登录系统需要解决哪些问题？
很多人写登录，只写了一个页面和一个接口调用，但真实情况远比这复杂：
我们至少要解决👇
- 用户是否已登录？
- Token 存在哪里？
- App 重启是否自动登录？
- 多个页面如何共享登录态？
- 退出登录如何清理状态？
- Token 过期如何处理？
👉 这些问题的答案，都指向：全局状态管理。
二、设计登录系统的整体架构（先别写代码）
推荐结构
entry/ ├─ model/ │ ├─ AuthModel.ets // 登录状态模型（全局） │ └─ TaskModel.ets ├─ service/ │ ├─ AuthService.ets // 登录 / 退出 / 刷新 token │ └─ TaskService.ets ├─ store/ │ └─ AppStore.ets // 全局状态入口 ├─ pages/ │ ├─ Login.ets │ └─ Index.ets📌不要把登录状态写在某个页面里
📌登录态是全局状态
三、第一步：定义登录状态模型（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 的标准做法。
结语
登录系统不是一个页面，而是一整套状态管理体系。
