reactjs - 如何在 react 组件中存储用户配置文件信息并全局访问它

Question

我正在使用 Passport 对用户进行身份验证。身份验证成功后，我现在想在 react 组件之一中显示用户名和 ID。将来可能会有更多地方需要我访问用户信息。

我应该如何在独立的 React 组件中访问用户配置文件信息？

我尝试将用户信息存储在 cookie 中。访问每个组件中的 cookie 似乎很困惑。

app.post('/login/callback', auth.authenticate('saml', { failureRedirect: '/', failureFlash: true }), function (req, res) {
// stores the cookie information
    res.cookie('cookie1', req.user.id, { secure: true, signed: true, expires: new Date(Date.now() + 3600) });
    res.redirect('/');
   }
);

我想在所有反应组件中全局访问用户主体。

Answer 1

全局状态管理有多种选择。

Local Storage : 使用浏览器本地存储保存详细信息

Session Storage : 这与Local Storage 类似，只有一个区别:localStorage 中的数据不会过期，而sessionStorage 中的数据会在页面 session 结束时被清除。

Context :Context 旨在共享可被视为“全局”的 React 组件树的数据

Redux : 使用状态管理库在一处管理状态。