Passage de toutes les requêtes http et des Routes React par le backend node d'abord pour la vérification de la session et ensuite le chemin de retour.

Question

J'essaie de faire passer toutes les requêtes http et React Routes par un backend node pour vérifier la session.

J'utilise également webpack-dev-server, donc je suppose que dans mon environnement de développement, je devrai utiliser la fonction de proxy.

Mais une fois que la requête atteint le serveur node, je ne suis pas sûr de savoir comment renvoyer les résultats à react front end et procéder avec la page normale de react router.

Quelque chose comme : 1. Cliquez sur le lien React Router vers /contact

3. /la route de contact dans le noeud vérifie la session

4. La session est/n'est pas valide

5. Si elle est valide, procédez au chargement normal de la page

6. Si ce n'est pas le cas, retournez à la page d'accueil et changez d'état.

Je suppose qu'au moins une partie de cette opération sera effectuée avec des méthodes de cycle de vie ?

Est-ce que tout cela est possible sans utiliser de fonctionnalité frontale autre que react router. Je veux que cela dépende entièrement du back-end pour vérifier la session existante ou générer une nouvelle session.

Answer 1

React gère tout le routage du côté client, si vous voulez accéder à /contact en dehors de votre application web, vous devez avoir quelque chose comme ceci :

app.get('*', (req, res) => {
  res.render('index');
});

Si vous souhaitez gérer un itinéraire prédéfini, vous pouvez également le faire :

// Path can be anything you want check in this case any route
app.use('/', (req, res, next) => {
  const { token } = req.cookies;
  if (!token) {
    res.status(400).send({ data: 'error' });
  } else {
    // Verifying some token function
    verifyIdToken(token)
      .then((claims) => {
        // Perform some operations or assignments
        req.claims = claims;
        // Countinue
        next();
      })
      .catch((error) => {
        res.status(400).send({ data: 'error', message: error });
      });
  }
});

Mais si vous voulez vérifier la session dans le client, je suggère de faire un appel à une route '/authenticate', puis de mettre à jour votre état en fonction de votre réponse, par exemple :

J'ai un composant Accueil, qui ne peut être visible que par les utilisateurs connectés. J'ai donc créé un composant de haut niveau pour l'envelopper, qui ressemble à ceci :

hoc-admin.js

// Generic validation method
const isEmpty = prop => (
  prop === null ||
  prop === undefined ||
  (prop.hasOwnProperty('length') && prop.length === 0) ||
  (prop.constructor === Object && Object.keys(prop).length === 0)
);

// This receives the props I want to check and the component to render
const userHOC = (props, Comp) => (WrappedComponent) => {
  return class userHOC extends Component {
    render() {
      let valid = false;
      props.map((prop) => {
        valid = this.props && !isEmpty(this.props[prop])
        // You can also check redux state props
        // valid = this.props.common && !isEmpty(this.props.common[prop])
      });
      return valid
        ? (
          <WrappedComponent {...this.props} /> // My wrapped component (Home)
        )
        : (
          <Comp {...this.props} /> // My parameter component (Login)
        )
    }
  };
};

export default userHOC;

Ensuite, j'ai juste besoin d'envelopper chaque composant qui a besoin d'une propriété à montrer, dans ce cas, nous recherchons des utilisateurs dans mon composant maison :

import HocUser from '../hoc/hoc-user';

class Home extends Component {
...
}

export default HocUser(['user'], Login)(Home);
``