Как работает Экспресс и Реакция маршрутов при первом запросе GET из браузера?

Question

Я новичок в мире реактивов и в мире полных стэков, но я бесконечно искал ответ на следующие вопросы, и некоторые рекомендации были бы очень полезны.

Я создаю приложение, используя React и Express.Это требует аутентификации, поэтому я планировал использовать Passport, чтобы помочьJS на стороне клиента использует React Routers для навигации по сайту.Это все нормально, но моя проблема связана с начальным GET-запросом, сделанным браузером.

Сначала я опишу требования к конкретному приложению, а затем обобщу то, чего не понимаю.

Как я уже сказал, мое приложение требует аутентификации OAuth2.Если вы пытаетесь получить путь на моем сайте, и вы не вошли в систему, он должен просто загрузить страницу входа.Если вы вошли в систему, то загрузитесь как обычно и найдите свой путь.Как и в Facebook, я бы хотел, чтобы URL входа был таким же, как и на странице «подачи».Так же как и то, как маршрут facebook.com '/' является либо страницей входа, либо вашим новым каналом, в зависимости от того, вошли ли вы в систему, я хочу того же.

Насколько я понимаю, Passport аутентифицируется на бэкэнде, проверяя заголовок запроса.Итак, я понимаю, что у меня должно быть какое-то промежуточное программное обеспечение, которое говорит: «Если пользователь вошел в систему, продолжайте движение по маршрутам, иначе создайте страницу входа» ... Как это сделать?Как будет выглядеть код?Мой единственный опыт работы с Express был из вступительного класса, который использовал res.render для отправки обратно HTML-файла и передачи его через какой-то механизм шаблонов, например, руль.Но я понятия не имею, как это будет работать с реакциями.Буду ли я использовать res.render ()?Что-то другое?

Допустим, в моем index.html есть корневой div, в который нужно ввести реакцию.Если бы мне пришлось угадывать, я бы отправил обратно эту страницу index.html с файлом .js с маршрутами и каким-то образом на бэкэнде отправил обратно маршрут, который я хочу, чтобы он соответствовал моим маршрутам реакции (либо для входа в систему, либо для пользователя).запрошен) ??

В целом, я думаю, я просто запутался, как выполняется первоначальный запрос к веб-сайту, использующему реагирующие маршруты.1) Как сервер взаимодействует со всем, чтобы сделать то, что я просил?2) Как будет выглядеть код для этого.Мой единственный опыт работы с React - это базовый курс Udemy, в котором для визуализации страницы просто использовались «реакции-скрипты запускаются».

Потратив целый день на поиск этого вопроса, он привел меня к SSR - кроличьей норесамо по себе, и я даже не уверен, если это то, что мне нужно, чтобы помочь мне.Так ли это?

Я явно упускаю некоторые фундаментальные знания, так как это действительно сбивает меня с толку, поэтому, если у вас есть какие-либо ресурсы, чтобы узнать больше, просто опубликуйте их.Спасибо!

Answer 1

Я понимаю вашу борьбу, так как мне пришлось пройти через нее самому при объединении внешнего интерфейса с внутренним, в частности React и Node. Итак, обо всем по порядку, мы знаем, что браузер / клиент всегда будет инициировать запрос к серверу, так как же React Router контролирует маршруты? Ну, на самом деле все просто, все, что вам нужно сделать, это вернуть все приложение реакции с любого маршрута с вашего экспресс-сервера. Код будет выглядеть примерно так:

const express = require('express');
const app = express();

app.get('/*', (req, res, next) => {
  // Return React App index.html
});

app.listen(3000);

Как только приложение реагирует на браузер пользователя (не беспокойтесь о путях, так как программа реагирует автоматически в соответствии с URL-адресом на основе кода, написанного на стороне клиента, оно также позаботится об аутентификации и странице фида). когда он будет сканировать ваше локальное хранилище, файлы cookie и т. д.), он будет управлять маршрутизацией, а не отправлять запрос на экспресс-сервер. Но что происходит, когда мы запрашиваем данные с нашего сервера, хорошо, что приложение реагирует на каждый маршрут, поэтому нам нужно настроить маршрут API для обработки любых запросов данных.

app.get('/api/v1/*', (req, res, next) {
  // Return some data in json format 
});

Надеюсь, это даст вам представление о том, что вы искали.

Answer 2

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

Вам будет проще предположить, что интерфейс JavaScript (React) и серверный Javascript (NodeJS)два отдельных приложения, и они общаются друг с другом через API.

здесь код, который показывает Login компонент и Feed компонент в зависимости от того, вошли ли вы в

import React, { Component } from "react";
import axios from "axios";

class Home extends Component {
  constructor() {
    const accessToken = localStorage.getItem("accessToken");
    this.state = {
      accessToken,
      feeds: []
    };
  }

  componentDidMount() {
    if (this.state.accessToken) {
      axios(`api/feeds?accessToken=${this.state.accessToken}`).then(({ data }) => {
        this.setState({
          feeds: data
        });
      });
    }
  }

  render() {
    if (this.state.accessToken) {
      return <FeedsComponent feeds={this.state.feeds} />;
    }
    return <LoginComponent />;
  }
}

и это ваш бэкэнд

const express = require("express");

const app = express();

app.get('/api/feeds', (req, res, ) => {
    const feeds = [
        {},
        {}
    ]
    res.status(200).json(feeds);
});

app.listen(3001);

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

Answer 3

Я думаю, что фундаментальный пробел, с которым вы боретесь, проистекает из множества этих «вводных курсов», толкает весь клиент браузера на сервер приложений, чтобы все было быстро запущено и работало, как, например, сервер Node отображает весь React.приложение AND работает как API ...

 // Ajax request from React app to: http://example.com/api

app.use('/api/*'),()=> {
   res.send({ <!-- some JSON object -->})
})

// User visits in browser: http://example.com/**/*     

app.use('/*',()=>{
   res.render(<!-- entire React App sent to browser -->)
})

Первый запрос (при условии, что пользователь не посещает / api / *) просто отправит пакет React.Дальнейшая навигация пользователя внутри клиента обычно отправляет запросы XHR (или открывают WebSockets) из приложения React на маршруты Express, работающие в той же программе узла.

Во многих ситуациях имеет смысл разделять эти части вашей программы, так как реакция доставляется из совершенно другого места, чем то, где она запрашивает данные.Для этого есть много причин, но для меня важны оптимизация вычислительных ресурсов под различные требования к процессору, памяти, сети и т. Д., А также управляемость кода / развертывания.

Например ...

• Посещения пользователей: http://example.com *

  1. Nginx, Apache, облачный прокси'.etc направляет трафик к статическому пакету React, который не имеет аутентификации и никогда не связывается с вашим Node-сервером.
  2. Если у пользователя ранее была аутентификация, у него будет токен в локальном хранилище (если вы используетеJWT для проверки подлинности) и ваше приложение React будет настроено на постоянную проверку этих токенов при первой загрузке.
  3. Если у пользователя есть токен, он отправит запрос Ajax в фоновом режиме с токеном какHeader Bearer и отправит обратно данные пользователя, а затем перенаправит их на «страницу с проверкой подлинности», такую ​​как FB-канал, о котором вы упомянули.
  4. Если у них нет токена или аутентификация токена не пройдена, то React перенаправит ихна страницу входа в систему или регистрации

Реагировать

Реагировать в основном на высокие функции родной функции браузера "местоположение" (чтоотображается после вашего доменного имени).Поэтому любые события после начальной загрузки страницы (нажатия кнопок и т. Д.) Полностью обрабатываются React внутренне и используют эти маршруты, чтобы определить, что отображать или какие данные извлекать из API через Ajax (XHR).

Еслипользователь выполняет полную перезагрузку страницы, затем этот запрос возвращается на сервер и снова выполняет весь цикл

React Router

Позволяет выполнить 2вещи одновременно ...

1. Управление браузером Местоположение и История объекты.
2. Используйте эту информацию о истории и местоположении в другом месте, обнаруживая измененияи отправка событий.

SSR

Я только играл с SSR, поэтому могу говорить с ним, но он обеспечивает чрезвычайно низкую задержку для начальногорендерится, делая это в 1 сетевом запросе, так что вы хотите использовать его в тех областях вашей программы, где это важно.

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