Q: 前端接入现有用户系统，waline 未使用最新的 localStorage 用户信息 || Q: The front end is connected to the existing user system, and waline does not use the latest localStorage user information.

[AnzhiZhang]

Describe the bug | 问题描述

相关讨论：#2334

我试图在我的项目中直接使用 waline，目前已经根据文档实现了一套后端接口并可以正常使用。在前端方面，配置都可以正常处理，并且关闭了登录功能，计划使用直接修改 localStorage 让 waline “认为”用户已登录，并使用对应的鉴权。

现在的问题是：前端修改 localStorage 后，waline 有时候无法实现数据绑定，导致不能及时更新 ui。例如用户在登录页登录后，打开有 waline 的页面，并不能按权限显示正确的图标（删除、编辑等），鉴权的 token 也无法及时更新。

制作了一个 demo：https://stackblitz.com/edit/github-k2jvgx?file=pages%2Fwaline.vue

1. 打开 /waline，此时是未登录的，身份为匿名
2. 点击上方链接切换到 /login，切换用户为登录，此时用户系统的 localStorage AUTH_USER 已经更新了，但是 waline 的因为要在打开页面时更新，所以还没有变化
3. 点击上方链接切换回 /waline，页面加载时更新了 WALINE_USER，然后通过 v-if 显示 waline 组件，但是 waline 依然获取不到新的用户信息
4. 刷新页面，waline 读取到了用户信息，正常显示界面

以上过程中查看请求的 headers，也是没有使用最新的 token 的。

如果打开页面时直接点击上方的 switch user 按钮修改 localStorage，waline 可以及时更新，但切换页面后再切换回来，或者点击 switch show 切换 v-if 的显示之后，就无法实现绑定了。

猜测与 vue 的 useStorage 多方共同使用，和 Waline 组件加载相关，请问是否有解决的办法？

Website URL | 问题网站

1

Where your waline deploy? | 服务部署在哪里？

Other

Where your comment data store? | 数据存储在哪里？

PostgreSQL

---

Describe the bug | Problem description

Related discussion: #2334

I am trying to use waline directly in my project. Currently, a set of backend interfaces have been implemented according to the documentation and can be used normally. On the front end, the configuration can be processed normally, and the login function is turned off. We plan to directly modify localStorage to make waline "think" the user is logged in and use the corresponding authentication.

The current problem is: after the front end modifies localStorage, waline sometimes cannot implement data binding, resulting in the inability to update the ui in time. For example, after a user logs in on the login page and opens a page with waline, the correct icon (delete, edit, etc.) cannot be displayed according to permissions, and the authentication token cannot be updated in time.

Created a demo: https://stackblitz.com/edit/github-k2jvgx?file=pages%2Fwaline.vue

1. Open /waline. You are not logged in at this time and your identity is anonymous.
2. Click the link above to switch to /login and switch the user to login. At this time, the localStorage AUTH_USER of the user system has been updated, but the waline one has not changed yet because it needs to be updated when the page is opened.
3. Click the link above to switch back to /waline. WALINE_USER is updated when the page is loaded, and then the waline component is displayed through v-if, but waline still cannot obtain new user information.
4. Refresh the page, waline reads the user information, and displays the interface normally.

Checking the headers of the request during the above process also shows that the latest token is not used.

If you directly click the switch user button above to modify localStorage when opening the page, waline can be updated in time, but after switching the page and then switching back, or after clicking switch show to switch the display of v-if, binding cannot be achieved.

I guess it is related to the useStorage of vue, which is used by multiple parties, and is related to the loading of the Waline component. Is there a solution?

Website URL | Problem website

1

Where your waline deploy? | Where is the service deployed?

Other

Where your comment data store? | Where is the data stored?

PostgreSQL

[lizheming]

看情况你是在外部设置了 localStorage，期望 Waline 组件能感知到这块的变化并更新。
站在前端的角度上来说，一个组件的 props 没有发生变化，那么这个子组件就不应该更新。所以我理解这块 Waline 没有更新是符合预期的。
至于怎么解决你的问题，目前来看比较简单的办法就是将用户信息加入到 Waline 组件的 key props 中，这样子组件在 key 发生变化的时候能销毁重建，从而触发重新渲染。

---

It depends on the situation that you have set localStorage externally. It is expected that the Waline component can detect this change and update it.
From a front-end perspective, if the props of a component have not changed, then the subcomponent should not be updated. So I understand that this piece of Waline is not updated as expected.
As for how to solve your problem, the relatively simple way currently is to add user information to the key props of the Waline component, so that the sub-component can be destroyed and rebuilt when the key changes, thus triggering re-rendering.

[AnzhiZhang]

使用 v-if 重新加载子组件，不属于发生变化吗？我没理解错的话应该也是销毁重建吧

方便的话可以看下更新的 demo 吗？添加了 key 之后只重新渲染了评论列表部分，没有重新渲染整体，而且也是没有生效的。另外前面提到的是从别的页面修改了 localStorage，再到有 waline 的页面，这时候是完全新渲染的，但是也无法被感知到

---

Using v-if to reload a subcomponent does not constitute a change? If I understand correctly, it should also be destroyed and rebuilt.

If it's convenient, can you take a look at the updated demo? After adding the key, only the comment list part is re-rendered, and the entire comment list is not re-rendered, and it is also ineffective. In addition, as mentioned earlier, localStorage is modified from other pages to the page with waline. At this time, it is completely newly rendered, but it cannot be perceived.

[AnzhiZhang]

旧内容

无论是使用 v-if 还是 key 销毁重建，都无法实现刷新，在源码中找到了这段，猜测是因为 localStorage 储存在了这个文件，但是这个文件没有重新加载，所以无法读取到新的用户信息

waline/packages/client/src/composables/userInfo.ts

Lines 9 to 15 in fed2d8f

	let userInfoStorage: UserInfoRef | null = null;
	export const useUserInfo = (): UserInfoRef =>
	(userInfoStorage ??= useStorage<UserInfo | Record<string, never>>(
	USER_KEY,
	{},
	));

修改为这样即可解决问题

 export const useUserInfo = (): UserInfoRef => 
   useStorage<UserInfo | Record<string, never>>( 
     USER_KEY, 
     {}, 
   );

参考 vue 源码，useStorage 也是没有做这个缓存的，不知道能否考虑修改一下这个 composable？如果可以的话，我可以开个 PR

我是下载源码，编辑，然后运行 build:client，然后复制 packages/client/dist 到 node_modules/@waline/client/dist，经过了一些测试，似乎还是有些问题，先暂时放弃了，希望未来有路过的用户可以提供一些解决方案

[lizheming]

@Mister-Hope Hopes 老师辛苦空了看看这个问题，我对 Vue 这几个 Hooks 不是特别了解。

---

@Mister-Hope Hopes Teacher, please take a look at this issue after all your hard work. I don’t know much about these Vue Hooks.