Question

在许多React教程中，我已经看到在localStorage中用于驱动应用程序中身份验证状态的令牌或其他类型数据的存在。但是，如果我要制作一个标题/导航栏组件，以显示一个“登录”或“注销”的链接以适合用户的身份验证，那么看来我将不得不在redux存储中复制该localStorage令牌作为状态或在组件中以在身份验证状态更改时提示重新渲染。也许这使我不该感到烦恼，但是复制该信息似乎是多余的，并且如果用户首次访问应用程序或刷新页面时localStorage中存在预先存在的令牌，则可能还需要某种虚拟操作来正确设置身份验证状态

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

Answer 1

一种选择是看一下库redux-persist。它可以在会话之间为您处理所有还原状态。

Answer 2

我不将身份验证令牌/数据保持在Redux或本地状态，我使用的是一个仅读取/写入localStorage并有条件地渲染导航栏的身份验证模块：

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

和Auth.js：

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

由于我的所有状态都不是一个地方，因此这仍然不是理想的imo，但我确实认为这比复制您所说的信息要好一些

在商店和localStorage之间复制身份验证数据

2 个答案: