如何在 React 和 Express 应用程序中存储身份验证状态

Question

我有反应节点快递应用程序。在客户端，我正在使用这样的 react-router：

export default function App() {

  return (

    <div className="App">

      <Router> 

      <MenuBar/>

        <Switch>

          <Route exact path="/" component={Main}/>

          <Route path="/signin" component={SignIn}/>

          <Route path="/signup" component={SignUp}/>

          <Route path="/search" component={Search}/>

          <Route path="/post" component={Post}/>

        </Switch>

      </Router>

    </div>

  );

}

在服务器端，我有使用本地和谷歌策略的护照。成功登录后，当客户端从 axios 调用服务器时，我看到 req.user 存在于服务器端，所以我猜这是检查用户是否登录的一种方法。

我的问题是，如果我希望我的反应应用程序根据用户的登录状态具有不同的行为，例如，注销按钮而不是登录用户的登录按钮，并且“/post” URL 仅适用于登录用户（重定向如果用户未登录，则为“/”），如何在客户端存储用户登录状态？

据我了解，在刷新页面时将这些数据存储在 Context 或 Redux 中会出现问题，因为刷新后数据会消失，对吧？我必须使用

useEffect((//axios call to check auth state)=>,[])

在路由器的每个组件中并根据服务器的响应更新本地状态？有没有更好的办法？

Answer 1

localStorage 是执行此类操作的最佳方式，如果不使用令牌，则必须使用令牌来维护会话。当任何 API 被命中时，每页一个，使用后端的会话令牌进行检查。将身份验证状态值保存在 localStorage 中将使用户可以访问其他没有登录的页面。

Answer 2

由于这是一个复杂的问题，无法编写完整的解决方案。这是指导方针登录时，将凭据保存在 localStorage 中，例如 accessToken、刷新令牌编写通用代码（身份验证服务）以在 localStorage 中写入和读取访问令牌和用户信息，以便您可以访问应用程序中的任何位置ProtecteRoute像本文中给出 的那样编写您的自定义https://tylermcginnis.com/react-router-protected-routes-authentication/注销时，使用并重定向或更改状态从 localStorage 清除您的数据，Auth.logout()这样 ProtectedRouter 将不允许用户进入受保护的应用程序页面，因为您的凭据已被删除Auth.isLoggedIn()并将返回 false。