How to pass data from one React website to another React Website-CodePudding

How do I send data to my React website so that, e.g., it knows not to show a login form? I think I know how to do it via the URL, (like a querystring in the olden days). Is there a more secure way than that?

CodePudding user response：

You need to create an API at the backend of one website and call it from the other to know if you are logged in. By the way, for authentication I suggest using a third party user OAuth2 systems from popular websites (like Google, Github, Facebook, etc.) for easier experience and secure authentication. Cheers, Pranjal

CodePudding user response：

Oh, I just noticed that you want to pass between the frontend apps the data

you can do that via an API or via query string.

Therefore you just create a useEffect() for a function-based component or a componentWillMount() for a class-based component in which you read the query string.

  useEffect(() => {
    // readParams
    const urlSearchParams = new URLSearchParams(window.location.search);
    const params = Object.fromEntries(urlSearchParams.entries());
    // do something with params

  }, []); // pass empty array so it is only called on boot up

This approach below is the description for a common start-up if you pull the data like above suggested form an API

To feed your react app you usually write a bootup script. In this script, you use AJAX to pull data from all the sources you need. Once the data is there you start to render your components.

If you don't want to use a dedicated script you can also put the calls into the app root.

So step plan what I do:

load-store and init. store
run boot script, the boot script commits the pulled data to the store.
after the boot script is done boot up the app
depending on the data you received load the req. components.