There are a few ways to fix this, let's go by parts.
Requisitions
ReactJS is just a library for interface building, does not offer you, as well as frameworks native request ways, you can use other libraries like axios , or even use the api fetch present in ES6, or even the old XMLHttpRequest .
Example with axes:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get('https://jsonplaceholder.typicode.com/users')
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Example with fetch:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/users')
.then((resp) => resp.json())
.then(function(data) {
const persons = res.data;
this.setState({ persons });
})
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Font
Sessions
Ways to keep the user logged in
This will depend more on your architecture nowadays to a greater tendency to use JSTs (JSON Web Token), where you store generated tokens in your backend application and send them as a header in requests for routes that are protected, (basically a WEB badge system).
The storage of this token can be done through the WebStorage API, using sessionStorage
or localStorage
.
It is always good to maintain security and also take a look at how to store these token securely by implementing synchronization tokens for example, I advise you to read this article link and in this link .
You can vary the implementation type with other libraries
, we also have redux-react-session
, in which case it will depend on your environment.
The reactjs are very agnostic of this type of thing, you can go "hunting" the best strategy that best fit to what you need.