NextJS 中使用本地存储的最佳方式

Question

如果用户无权访问，我正在尝试使菜单无法访问。

用户登录后，它将从API返回ACL，然后我将其存储在locastorage中，从那里我只显示用户从locastorage拥有的菜单，当用户没有访问权限时也会显示404。

问题是，一开始localstorage返回null，但是一秒钟后数据就在那里了。 我创建了一个间隔来更新数据，但这对我来说似乎很奇怪（但实际上我想避免 ts 错误，因为它说它具有“任何”值）。

对于这种情况，有更好的方法来消耗本地存储吗？

提前致谢

useEffect(() => {
    const interval = setInterval(() => {
      const userInfo: string | null = localStorage.getItem('userInfo');

      if (userInfo) {
        try {
          const userInfoJson: UserInfo = JSON.parse(userInfo);

          if (userInfoJson?.acl) {
            setUserAcl(userInfoJson.acl);
            clearInterval(interval);
          } else if (userInfoJson?.aclCustom) {
            setUserAcl(userInfoJson.aclCustom);
            clearInterval(interval);
          }
        } catch (e) {
          console.error('Failed to parse userInfo', e);
          setUserAcl([]);
          clearInterval(interval);
        }
      }
    }, 200);

    return () => clearInterval(interval);
  }, []);

Answer 1

为了避免使用间隔，请使用 useeffect 监听本地存储。

import React, { useState, useEffect } from 'react';

const App = () => {
  const [userAcl, setUserAcl] = useState([]);

  const fetchUserInfoFromLocalStorage = () => {
    const userInfo = localStorage.getItem('userInfo');

    if (userInfo) {
      try {
        const userInfoJson = JSON.parse(userInfo);
        if (userInfoJson?.acl) {
          setUserAcl(userInfoJson.acl);
        } else if (userInfoJson?.aclCustom) {
          setUserAcl(userInfoJson.aclCustom);
        }
      } catch (e) {
        console.error('Failed to parse userInfo', e);
        setUserAcl([]);
      }
    }
  };

  useEffect(() => {
    fetchUserInfoFromLocalStorage();

    const handleStorageChange = (event) => {
      if (event.key === 'userInfo') {
        fetchUserInfoFromLocalStorage();
      }
    };

    window.addEventListener('storage', handleStorageChange);

    return () => {
      window.removeEventListener('storage', handleStorageChange);
    };
  }, []);

  // Add your logic to render the menu based on userAcl
  // ...

  return (
    <div>
      {/* Your component JSX */}
    </div>
  );
};

export default App;