Reactjs 我如何跟踪用户是否登录到我的网站？

我是一个新的反应，并试图找到一个答案。也许直到现在我都在寻找错误的东西

我目前正在我的React站点上使用API，该API在用户登录后返回访问令牌

我通过检查该用户是否存在访问令牌来跟踪该用户是否登录

问题是，如果我导航到另一个页面或返回到该页面，访问令牌和API包装将被擦除

我必须再次登录并检索所有数据。（重复登录过程）

是否有某种方式可以存储我的数据（可能通过Express）？或任何其他推荐方式

---

谢谢你

听起来你在用JWT进行身份验证。 登录时，您需要将令牌保存在localStorage中

.then(response => {
      const { token, userId } = response.data;
      localStorage.setItem("token", token);
      localStorage.setItem("userId", userId);

然后将某些路由设置为需要令牌访问的私有路由

<Switch>
            <Route exact path="/" render={props => <Home {...props} />} />
            <Route path="/login" render={props => <Login {...props} />} />
            <Route path="/signup" render={props => <Signup {...props} />} />
            <PrivateRoute
              path="/account"
              render={props => <Account {...props} />}
            />
            <PrivateRoute
              path="/dashboard"
              render={props => <Dashboard {...props} />}
            />
</Switch>

} />
} />
} />
}
/>
}
/>

专用路由组件

import React from "react";
import { Route, Redirect } from "react-router-dom";

const PrivateRoute = ({ render: Component, ...rest }) => {
  return (
    <Route
      {...rest}
      render={props => {
        if (localStorage.getItem("token")) {
          return <Component {...props} />;
        } else {
          return <Redirect to="/" />;
        }
      }}
    />
  );
};

export default PrivateRoute;

从“React”导入React；
从“react router dom”导入{Route，Redirect}；
常量privaterout=（{render:Component，…rest}）=>{
返回(
{
if（localStorage.getItem（“令牌”））{
返回；
}否则{
返回；
}
}}
/>
);
};
导出默认私有路由；

您可以将令牌保存在浏览器存储器中

---

如果使用ReDux，请考虑使用ReDux持久性。

< P>使用JWT的常用方法是将令牌存储在本地存储中，并使API调用在App.JS组件的组件（）生命周期中验证该令牌，这样您就不会在浏览器刷新时登录。令牌过期时间应在后端处理