Question

我有一个React应用，并与Node js一起提供。我目前在节点js中实现了jwt令牌。因此，当我登录时，令牌被发送回客户端，然后存储在本地存储中。

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

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

我目前无法通过第一步

这就是我所拥有的

private-route.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;

app.js

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

server.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未定义错误，我想不起其他任何事情。

保护路由以响应服务器端渲染

0 个答案: