在 React 中显示快速会话数据答案

【问题标题】：Display express-session data in React在 React 中显示快速会话数据
【发布时间】：2020-06-18 03:05:59
【问题描述】：

我实现了一个 OpenID passport.js 策略（passport-steam http://www.passportjs.org/packages/passport-steam/）

到我的 MERN 堆栈应用程序。登录用户的信息正在保存在快速会话中。因此可以通过

访问带有用户信息的对象

req.session.passport.user

在我的 Node.js 文件中。

让我的 React 前端可以访问此会话数据的最佳/常用方法是什么？ 在其他非反应项目中，我使用了像handlebars.js这样的模板引擎，它通过像这样传递它们使得显示属性变得非常容易：

app.get('/', (req, res) => {
  res.render('main', {
    user: req.user
  });
});

另外，我不想在服务器端呈现我的 react-app。

【问题讨论】：

标签： node.js reactjs api express authentication

【解决方案1】：

为用户创建了一个端点：

app.get("/user", (req, res) => {
res.send(user);
});

并在我的 react 应用程序中获取数据，创建一个 Conext 以使其可用于所有其他组件：

import React, { createContext, useState, useEffect } from "react";
const context = createContext(null);

const UserProvider = ({ children }) => {
const [user, setUser] = useState({});

useEffect(() => {
  fetch("/user")
      .then(res => res.json())
      .then(res => setUser(res))
      .catch(err => {
          console.log(err);
      });
}, []);

return (
  <context.Provider value={user}>
      {children}
  </context.Provider>
);
};

UserProvider.context = context;
export default UserProvider;

【讨论】：