第7篇|退出登录后旧状态还在:把持久化键集中水合和清理
第7篇退出登录后旧状态还在把持久化键集中水合和清理摘要退出登录后还看到旧头像、旧收藏数、旧课程进度这类问题很容易被当成页面刷新不及时。实际根因通常是持久化键散落在各处启动时谁负责水合不清楚退出时谁负责清理也不清楚。我的做法是把持久化键集中维护启动时统一写安全默认值退出时按同一份清单清理。做鸿蒙应用时AppStorage、Preferences、本地缓存经常一起出现。它们本身没问题问题在于项目后期页面越来越多状态键也越来越散。某个页面新增了favoriteCourses另一个页面新增了profileDraft退出登录时只清了 token旧状态就会继续留在页面上。这篇文章解决四个具体问题为什么退出登录不能只删 token。如何集中维护持久化键。启动水合和退出清理怎样复用同一份清单。页面如何安全读取StorageLink状态。退出登录不是一个按钮事件而是一条状态链路退出登录至少会影响四类状态状态例子如果没清理会怎样身份状态token、userId误判仍是登录态用户资料昵称、头像显示上一个账号信息业务缓存收藏、历史、进度新账号看到旧数据页面草稿搜索词、编辑草稿页面恢复到错误上下文所以退出登录不能只写成clearToken()。它应该是一个明确的重置流程覆盖身份、业务缓存和页面状态。先把键名集中起来我会先建一个PersistKeys集中列出需要水合和清理的键// storage/PersistKeys.etsexportconstPersistKeys{token:auth_token,userId:auth_user_id,profile:profile_state,favoriteCourses:favorite_courses,learningProgress:learning_progress,searchKeyword:search_keyword}asconstexportconstLoginScopedKeys:string[][PersistKeys.token,PersistKeys.userId,PersistKeys.profile,PersistKeys.favoriteCourses,PersistKeys.learningProgress,PersistKeys.searchKeyword]这份清单的价值在于可复用。启动水合、退出清理、重置测试数据都可以引用同一组键避免某个新状态只加在页面里忘了加到清理流程里。启动时先写安全默认值页面挂载时StorageLink读到的值可能还没准备好。为了避免首屏访问未准备状态我会在应用启动阶段先写默认值// storage/AppStorageBootstrap.etsimport{PersistKeys}from./PersistKeysexportclassAppStorageBootstrap{statichydrateDefaults():void{AppStorage.setOrCreate(PersistKeys.token,)AppStorage.setOrCreate(PersistKeys.userId,)AppStorage.setOrCreate(PersistKeys.profile,{})AppStorage.setOrCreate(PersistKeys.favoriteCourses,[])AppStorage.setOrCreate(PersistKeys.learningProgress,{})AppStorage.setOrCreate(PersistKeys.searchKeyword,)}}这一步不是读取真实数据而是先保证页面读到的是安全结构。比如数组就是数组对象就是对象字符串就是字符串。页面后续可以等持久化数据加载完成再更新。AbilityStage 里完成基础水合基础水合适合放在启动早期保证页面创建前已有默认值// entryability/EntryAbility.etsimport{AppStorageBootstrap}from../storage/AppStorageBootstraponCreate(want:Want,launchParam:AbilityConstant.LaunchParam):void{AppStorageBootstrap.hydrateDefaults()console.info([storage] default app storage hydrated)}如果项目里还有 Preferences 读取可以在默认值之后异步补真实值。关键是不要让页面第一次挂载时面对undefined尤其是数组、对象这类会被.length或属性访问触发异常的值。退出登录用统一服务清理退出登录时不要在页面里一个个删。用一个服务统一清理// service/LogoutService.etsimport{LoginScopedKeys,PersistKeys}from../storage/PersistKeysexportclassLogoutService{staticasynclogout(preferences:dataPreferences.Preferences):Promisevoid{for(constkeyofLoginScopedKeys){awaitpreferences.delete(key)}awaitpreferences.flush()AppStorage.set(PersistKeys.token,)AppStorage.set(PersistKeys.userId,)AppStorage.set(PersistKeys.profile,{})AppStorage.set(PersistKeys.favoriteCourses,[])AppStorage.set(PersistKeys.learningProgress,{})AppStorage.set(PersistKeys.searchKeyword,)}}这段代码同时处理两层持久化存储和运行时状态。只删 Preferences 不够因为当前页面可能还在读AppStorage只改AppStorage也不够因为下次启动可能又把旧值读回来。页面读取状态要有安全方法页面里不要直接假设StorageLink一定是你想要的类型。尤其是在 Builder 里直接对不确定对象做字符串拼接或.length很容易把状态问题变成运行时崩溃。// pages/ProfilePage.etsEntryComponentstruct ProfilePage{StorageLink(favorite_courses)favoriteCourses:string[][]StorageLink(profile_state)profile:Recordstring,Object{}getFavoriteCount():number{if(!Array.isArray(this.favoriteCourses)){return0}returnthis.favoriteCourses.length}getNickname():string{constvaluethis.profile[nickname]returntypeofvaluestringvalue.length0?value:未登录用户}build(){Column(){Text(this.getNickname())Text(收藏课程${this.getFavoriteCount()})}}}这里用普通方法返回安全值页面展示层就不用面对不确定结构。退出登录、切账号、清空数据后页面仍然能稳定渲染。退出后要处理路由回退状态清掉以后如果用户还停留在详情页或个人中心深层页面也可能看到不该出现的界面。退出流程应该把页面带回明确入口// pages/ProfileSettingsPage.etsasyncfunctionconfirmLogout(preferences:dataPreferences.Preferences):Promisevoid{awaitLogoutService.logout(preferences)router.replaceUrl({url:pages/LoginPage})}这里用replaceUrl是为了避免用户按返回键又回到登录前的页面。退出登录不仅是数据清理也包含导航栈收口。我会怎样复查退出流程我一般按下面场景走登录账号 A进入个人中心、收藏页、学习进度页。执行退出登录确认头像、昵称、收藏、进度全部清空。按返回键确认不会回到账号 A 的页面。关闭应用再打开确认旧状态没有从持久化里恢复。登录账号 B确认不会看到账号 A 的业务缓存。这套复查能覆盖运行时状态、持久化状态、导航栈和切账号场景。常见问题和处理方式现象常见原因处理方式退出后头像还在只删了 token同时清 profile 和 AppStorage重启后旧数据回来Preferences 没删干净按 LoginScopedKeys 统一删除退出后返回到旧页面导航栈没收口用 replaceUrl 回登录页页面偶发崩溃StorageLink 首次值不安全启动时 setOrCreate 默认值小结状态清理要和状态创建使用同一份清单退出登录要稳定关键不是多写几个delete而是让状态创建和状态清理都围绕同一份键名清单。启动先水合安全默认值页面用方法读取安全值退出时同时清持久化和运行时状态最后收掉导航栈。这样旧账号状态就不会在新会话里冒出来。

相关新闻