时间戳

首页 > 解决方案 > 保护路由以响应服务器端渲染

node.js - 保护路由以响应服务器端渲染

问题描述

我有一个反应应用程序，我用 Node js 为它提供服务。我目前在节点 js 中实现了一个 jwt 令牌。因此，当我登录时，会将令牌发送回客户端，然后存储在本地存储中。

验证用户是否已登录并有权访问某些页面。我需要

  1. 从本地存储中获取令牌
  2. 检查令牌的到期时间。如果它已过期，请将它们重定向回登录页面。

我目前无法通过第一步

这是我所拥有的

私有路由.js

function PrivateRoute({ component: Component, ...rest }) {

const [token, setToken] = useState();

useEffect(() => {
    setToken(localStorage.getItem("usr-sess"));
    console.log(token);
}, [token]);
return (
    <Route
      {...rest}
      render={props =>
        token ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
 );
}

export default PrivateRoute;

应用程序.js

  <Switch>
     <Route exact path="/login" component={LoadableLogin} />
     <PrivateRoute eexact path="/test" component={LoadableTestPage} />
     <Route component={LoadableNotFound} />
  </Switch>

服务器.tsx

const jsx = renderToString(
  <ApolloProvider client={clientConfig}>
    <Loadable.Capture report={moduleName => modules.push(moduleName)}>
      <StaticRouter context={context} location={req.url}>
        <App />
      </StaticRouter>
    </Loadable.Capture>
  </ApolloProvider>
);

即使令牌在那里，我也会不断被重定向回登录。

问题是 setToken() 需要一些时间，然后它会将我重定向回登录。有没有办法做到这一点？

不使用 useEffect 和做

 localStorage.getItem("usr-sess") ? (
     <Component {...props} />
   ) : (
     <Redirect to="/login" />
   )

抛出一个 localStorage 未定义的错误，我想不出还有什么可做的。

标签： node.jsreactjsserver-side-rendering

解决方案

推荐阅读