фейсбук-паспорт с реактив-редуксом на бэкэнде

Question

Извините, если этот вопрос задавался ранее, мы исследовали и посмотрели несколько учебных пособий, но ни один из них не прояснил наших сомнений в как справиться с пользователем на стороне клиента.

Мы пытаемся пройти проверку подлинности с помощью facebook (или любого другого поставщика стратегии) ​​с использованием паспорта на Node.js, запуская поток из приложения React / Redux, где я хочу разрешить доступ к определенным компонентам, когда пользовательвошли в систему.

Наш поток работает, как и должно быть.

1. Запускаем экспресс-бэкэнд на порту 8080, инициализируем паспорт с cookie-сессией:

    const app = express();
    // Use JSON for req.body
    app.use(bodyParser.json());
    // Set up cookies for passport logged in sessions
    app.use(cookieSession(settings.cookies));
    // Initialize passport
    app.use(passport.initialize());
    app.use(passport.session()); // Calls serializeUser & deserializeUser
    // Share static files
    app.use(express.static(path.join(__dirname, '../build')));
    // Register  routes
    app.use('/auth', authRouter);

Пользователь нажимает кнопку входа в систему на одном из наших компонентов, которые указывают на / auth / facebook API

            render() {
        return (<div className="container">
            <h3>You need to be logged in to see this</h3>
            {/*Using a fetch onClick does not work because of CORS, use <a> */}
            <a href="https://localhost:8080/auth/facebook">
                <button >LOGIN WITH FACEBOOK</button>
            </a>
            </div>)}

Наше экспресс-приложение предоставляет маршруты для потока паспортов на 'auth' :

    /** authRouter **/
router.get('/facebook', passport.authenticate('facebook', { scope: ['email'] }));

//Facebook will redirect the user to this URL after approval.  
router.get('/facebook/callback', passport.authenticate('facebook'), (req, res) => {
    res.redirect('/dashboard');
});

Появляется всплывающее окно для входа в Facebook, пользователь перенаправляется на конечную точку / facebook / callback .

Именно в этот момент внешний интерфейс правильно направлен накомпонент Dashboard.Мы видим в консоли разработчика, что cookie с аутентификацией установлен.Но мы не знаем, как получить доступ к пользовательской информации, которая находится в req.user на бэкэнде.

Мы хотим получить доступ к пользовательской информации перед отображением других компонентов, которые используют эти данные.Точка входа app.js использует React Routes, такие как:

  render() {
    return (
      < BrowserRouter >
        <div className='App'>
          <Layout title={'Passport Demo'}>
            <Route exact path='/' render={() => { return (<h1>This would be home</h1>) }} />
            {/* Hide other components unless logged in */}
            {this.state.isLoggedIn ?
              <div>
                <Route path='/dashboard' component={Home} />
                <Route path='/explore' component={Explore} />
              </div> : <Login />
            }
          </Layout>
        </div>
      </BrowserRouter >
    );
  }

Как мы можем установить isLoggedIn и состояние пользовательских данных после успешного перенаправления с Facebook? - в идеале, используя редукционные действия иредукторы.

Как мы можем передать пользовательские данные из серверной части в интерфейс?

Если бы решением было создать новый маршрут / users просто для получения данных, мне все равно нужно было бы получить доступ к userID / token, чтобы сделать запрос с помощью fetch или axios, как это сделать?это сделано?

1045 * Спасибо заранее.