第7篇｜退出登录后旧状态还在：把持久化键集中水合和清理

第7篇｜退出登录后旧状态还在：把持久化键集中水合和清理

摘要：退出登录后还看到旧头像、旧收藏数、旧课程进度，这类问题很容易被当成页面刷新不及时。实际根因通常是持久化键散落在各处：启动时谁负责水合不清楚，退出时谁负责清理也不清楚。我的做法是把持久化键集中维护，启动时统一写安全默认值，退出时按同一份清单清理。

做鸿蒙应用时，AppStorage、Preferences、本地缓存经常一起出现。它们本身没问题，问题在于项目后期页面越来越多，状态键也越来越散。某个页面新增了 favoriteCourses，另一个页面新增了 profileDraft，退出登录时只清了 token，旧状态就会继续留在页面上。

这篇文章解决四个具体问题：

1. 为什么退出登录不能只删 token。
2. 如何集中维护持久化键。
3. 启动水合和退出清理怎样复用同一份清单。
4. 页面如何安全读取 @StorageLink 状态。

退出登录不是一个按钮事件，而是一条状态链路

退出登录至少会影响四类状态：

所以退出登录不能只写成 clearToken()。它应该是一个明确的重置流程，覆盖身份、业务缓存和页面状态。

先把键名集中起来

我会先建一个 PersistKeys，集中列出需要水合和清理的键：

// storage/PersistKeys.ets
export const PersistKeys = {
  token: 'auth_token',
  userId: 'auth_user_id',
  profile: 'profile_state',
  favoriteCourses: 'favorite_courses',
  learningProgress: 'learning_progress',
  searchKeyword: 'search_keyword'
} as const

export const LoginScopedKeys: string[] = [
  PersistKeys.token,
  PersistKeys.userId,
  PersistKeys.profile,
  PersistKeys.favoriteCourses,
  PersistKeys.learningProgress,
  PersistKeys.searchKeyword
]

这份清单的价值在于可复用。启动水合、退出清理、重置测试数据都可以引用同一组键，避免某个新状态只加在页面里，忘了加到清理流程里。

启动时先写安全默认值

页面挂载时，@StorageLink 读到的值可能还没准备好。为了避免首屏访问未准备状态，我会在应用启动阶段先写默认值：

// storage/AppStorageBootstrap.ets
import { PersistKeys } from './PersistKeys'

export class AppStorageBootstrap {
  static hydrateDefaults(): 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.ets
import { AppStorageBootstrap } from '../storage/AppStorageBootstrap'

onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  AppStorageBootstrap.hydrateDefaults()
  console.info('[storage] default app storage hydrated')
}

如果项目里还有 Preferences 读取，可以在默认值之后异步补真实值。关键是不要让页面第一次挂载时面对 undefined，尤其是数组、对象这类会被 .length 或属性访问触发异常的值。

退出登录用统一服务清理

退出登录时，不要在页面里一个个删。用一个服务统一清理：

// service/LogoutService.ets
import { LoginScopedKeys, PersistKeys } from '../storage/PersistKeys'

export class LogoutService {
  static async logout(preferences: dataPreferences.Preferences): Promise<void> {
    for (const key of LoginScopedKeys) {
      await preferences.delete(key)
    }
    await preferences.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.ets
@Entry
@Component
struct ProfilePage {
  @StorageLink('favorite_courses') favoriteCourses: string[] = []
  @StorageLink('profile_state') profile: Record<string, Object> = {}

  getFavoriteCount(): number {
    if (!Array.isArray(this.favoriteCourses)) {
      return 0
    }
    return this.favoriteCourses.length
  }

  getNickname(): string {
    const value = this.profile['nickname']
    return typeof value === 'string' && value.length > 0 ? value : '未登录用户'
  }

  build() {
    Column() {
      Text(this.getNickname())
      Text(`收藏课程：${this.getFavoriteCount()}`)
    }
  }
}

这里用普通方法返回安全值，页面展示层就不用面对不确定结构。退出登录、切账号、清空数据后，页面仍然能稳定渲染。

退出后要处理路由回退

状态清掉以后，如果用户还停留在详情页或个人中心深层页面，也可能看到不该出现的界面。退出流程应该把页面带回明确入口：

// pages/ProfileSettingsPage.ets
async function confirmLogout(preferences: dataPreferences.Preferences): Promise<void> {
  await LogoutService.logout(preferences)
  router.replaceUrl({ url: 'pages/LoginPage' })
}

这里用 replaceUrl 是为了避免用户按返回键又回到登录前的页面。退出登录不仅是数据清理，也包含导航栈收口。

我会怎样复查退出流程

我一般按下面场景走：

1. 登录账号 A，进入个人中心、收藏页、学习进度页。
2. 执行退出登录，确认头像、昵称、收藏、进度全部清空。
3. 按返回键，确认不会回到账号 A 的页面。
4. 关闭应用再打开，确认旧状态没有从持久化里恢复。
5. 登录账号 B，确认不会看到账号 A 的业务缓存。

这套复查能覆盖运行时状态、持久化状态、导航栈和切账号场景。

常见问题和处理方式

小结：状态清理要和状态创建使用同一份清单

退出登录要稳定，关键不是多写几个 delete，而是让状态创建和状态清理都围绕同一份键名清单。启动先水合安全默认值，页面用方法读取安全值，退出时同时清持久化和运行时状态，最后收掉导航栈。这样旧账号状态就不会在新会话里冒出来。