Reactjs 在存储和本地存储之间复制身份验证数据

在许多React教程中，我看到本地存储中存在令牌或其他类型的数据，用于驱动应用程序中的身份验证状态。但是，如果我要制作一个header/navbar组件，该组件根据用户身份验证的需要显示指向“登录”或“注销”的链接，那么我似乎必须将该localStorage令牌复制为redux存储或组件中的状态，以便在身份验证状态更改时提示重新呈现。也许这让我感到不安，但复制这些信息似乎是多余的，而且如果用户第一次访问应用程序或刷新页面时，localStorage中存在预先存在的令牌，则可能需要某种虚拟操作来正确设置身份验证状态

---

在React应用程序中处理身份验证数据是否有比我在这里描述的更好的方法？

我没有将身份验证令牌/数据保持在Redux或本地状态，我使用的身份验证模块只读取/写入

本地存储

，并有条件地呈现导航栏：

<div>
   ...
   <a>{Auth.isAuthenticated() ? 'Sign Out' : 'Sign In'}</a>
</div>

---

这在我看来仍然不理想，因为我所有的状态都不在一个地方，但我确实认为这比像你说的那样复制信息要好一点。一个选择是查看库。它在会话之间为您处理所有redux状态的保存和恢复

我现在使用的和你现在使用的完全一样，但最大的问题是如果不改变道具或状态，组件将不会重新渲染。i、 例如，我将登录，但导航栏/标题组件不会相应更新。

class Auth {
    static storeToken(token) {
        localStorage.setItem('token', token)
    }

    static isAuthenticated() {
        return localStorage.getItem('token') !== null
    }

    static removeToken() {
        localStorage.removeItem('token')
    }

    static getToken() {
        return localStorage.getItem('token')
    }
}

export default Auth