node.js - 在通用应用程序中渲染reactjs组件之前如何获取localStorage?

标签 node.js local-storage react-router redux

我将“某些”用户的 session 数据存储在客户端的localStorage中,我需要在服务器渲染之后和加载reactjs应用程序之前获取此数据,以便我可以检查用户 session 是否有效。如果用户 session 有效,我会使用用户数据更新 redux 存储;否则,我将保持原样。

我正在使用react-router的onEnter钩子(Hook)来检查用户的 session 是否有效。问题是我正在请求服务器端保存在 localStorage 中的数据(我知道它不可用)。

因此,我需要一种方法来在服务器渲染后检查 localStorage 并为 onEnter Hook 做好准备。

我还想知道是否有办法在服务器端请求客户端的localStorage

最佳答案

您需要整理 client.js 文件中 createStorerender() 之间的逻辑。

import {createStore} from 'redux';
const store = createStore();

if(localStorage.get('token')) {
    store.dispatch(authenticate(localStorage.get('token')));
}

render(
    <Provider store={store}><App/></Provider>,
    document.getElementById('js-react')
);

请记住,如果authenticate操作创建者中有任何异步代码,您将需要等待它完成才能渲染。

关于node.js - 在通用应用程序中渲染reactjs组件之前如何获取localStorage?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34054475/

相关文章:

node.js - 测试 jsonwebtoken 身份验证 express 中间件

node.js - Post请求在flutter应用程序中发送未定义的数据

javascript - 获取或设置对象内的 localStorage 值

javascript - 如何在 localStorage 中存储列表

node.js - 服务器端 react 路由器不会呈现我的路线

node.js - 为什么我们要在 Express 服务器文件中导入 Mongoose?

Node.js理论——Node.js、Express.js、Passport.js

javascript - 不同调用时不同的变量增量

reactjs - 通过 containerElement 属性将 NavLink 传递到 Material UI 组件会出现 “Failed prop type” 警告

javascript - runtime.js :7 Uncaught Error: [RequireAuth] is not a <Route> component. <Routes> 的所有子组件必须是 <Route> 或 <React.Fragment>