当前位置：首页 > news >正文

羽球联盟 HarmonyOS NEXT 实战系列 (11/20)：游客与登录用户的数据空间隔离

news 2026/7/6 9:15:00

文章导读

游客空间使用g，登录用户使用u_<uid>，收藏、关注、历史和浏览量都按 scope 隔离。
项目没有接后端账号体系，但仍然通过稳定 uid 让同一昵称复用自己的本地空间。
登录、退出登录后都会重新灌入当前空间的状态，保证个人中心、详情页和列表页同步刷新。

页面效果

这篇文章对应的用户感知非常明确：游客态和登录态的个人中心统计不能串。游客在首页收藏一篇文章后，如果再用昵称登录，看到的应该是登录用户自己的收藏、关注和浏览记录，而不是把游客数据直接带过来。

从页面上看，这只是一组数字和一个登录入口；从实现上看，它要求持久化、AppStorage 和页面响应式保持同一份事实来源。只要这里处理不好，收藏页、球员关注和浏览历史都会变得不可信。

实战拆解

羽球联盟没有对接服务端账号体系，但它并没有因此忽略“不同用户数据要隔离”这件事。PrefStore先定义一组需要按用户空间隔离的 key：favorites、follows、history、viewCountsJson。随后，所有读写都通过storeKey()拼接 scope 前缀，游客走g，登录用户走u_<uid>。

uid 的生成也很实用。项目没有把昵称直接当成 key 使用，而是通过一个稳定哈希函数把昵称映射成 ASCII uid。这样同一个昵称多次登录会回到同一份本地空间，不同昵称之间又能自然隔离。它当然不能替代真正的账号认证，但对于本地演示、页面联调和教程讲解已经足够。

真正决定页面体验的，是rehydrateScoped()。用户登录、退出登录或重启应用时，当前空间的收藏、关注、历史和浏览量都会重新写回 AppStorage。由于详情页、个人中心、球员页都通过@StorageLink订阅这些状态，所以切换空间后，数字和按钮状态能立即反映当前身份，而不是停留在旧数据上。

关键代码

privatestaticstableUidFor(nickname:string):string{leth:number=5381;for(leti=0;i<nickname.length;i++){h=(((h<<5)+h)+nickname.charCodeAt(i))&0x7fffffff;}return'U_'+h.toString(36).toUpperCase();}privateasyncrehydrateScoped():Promise<void>{constfavStr=awaitthis.store!.get(this.storeKey('favorites'),'[]')asstring;consthistStr=awaitthis.store!.get(this.storeKey('history'),'[]')asstring;constfollowStr=awaitthis.store!.get(this.storeKey('follows'),'[]')asstring;constviewJson=awaitthis.store!.get(this.storeKey('viewCountsJson'),'{}')asstring;AppStorage.setOrCreate<string[]>('favorites',JSON.parse(favStr)asstring[]);AppStorage.setOrCreate<string[]>('history',JSON.parse(histStr)asstring[]);AppStorage.setOrCreate<string[]>('follows',JSON.parse(followStr)asstring[]);AppStorage.setOrCreate<string>('viewCountsJson',viewJson);}asynclogin(nickname:string,avatarUrl?:string):Promise<void>{constuid:string=PrefStore.stableUidFor(nickname.trim());AppStorage.setOrCreate<string>('loggedInUserId',uid);this.scope=`u_\${uid}`;awaitthis.rehydrateScoped();}