I learn a bit of React. It's time to login for users. But there was a problem. To get started, the code:
App.js
import React, {useState} from "react";
import { BrowserRouter as Router, Link, Route } from "react-router-dom";
import PrivateRoute from './PrivateRoute';
import Home from './Home';
import Login from "./Login";
import { AuthContext } from "./Auth";
function App(props) {
const [authTokens, setAuthTokens] = useState(localStorage.getItem("tokens") || "");
const setTokens = (data) => {
localStorage.setItem("tokens", JSON.stringify(data));
setAuthTokens(data);
}
return (
<AuthContext.Provider value={{ authTokens, setAuthTokens: setTokens }}>
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/login">Login</Link>
</li>
</ul>
<PrivateRoute exact path="/" component={Home} />
<Route path="/login" component={Login} />
</div>
</Router>
</AuthContext.Provider>);
}
export default App;
Login.js
import React, { useState } from "react";
import { Link, Redirect } from 'react-router-dom';
import axios from 'axios';
import { useAuth } from "./Auth";
function Login(props) {
const [isLoggedIn, setLoggedIn] = useState(false);
const [isError, setIsError] = useState(false);
const [userName, setUserName] = useState("");
const [password, setPassword] = useState("");
const { setAuthTokens } = useAuth();
const referer = props.location.state ? props.location.state.referer : '/';
function postLogin() {
axios.post("https://myapi.com/login.php", {
userName,
password
}).then(result => {
if (result.status === 200) {
setAuthTokens(result.data);
setLoggedIn(true);
console.log(result.data);
} else {
setIsError(true);
}
}).catch(e => {
setIsError(true);
console.log(e);
});
}
if (isLoggedIn) {
return <Redirect to={referer} />;
}
return (
<input type="username" value={userName} onChange={e=>{ setUserName(e.target.value); }} placeholder="username"
/>
<input type="password" value={password} onChange={e=>{ setPassword(e.target.value); }} placeholder="password"
/>
<input type="submit" onClick={postLogin}>Sign In</Button>
{ isError&& <div>The username or password provider were incorrect.</div>}
);
}
export default Login;
Auth.js
import { createContext, useContext } from 'react';
export const AuthContext = createContext();
export function useAuth() {
return useContext(AuthContext);
}
PrivateRoute.js
import React from 'react'
import { Redirect, Route } from 'react-router-dom'
import { useAuth } from "./Auth";
const PrivateRoute = ({ component: Component, ...rest }) => {
const { authTokens } = useAuth();
return (
<Route
{...rest}
render={props =>
authTokens ? (
<Component {...props} />
) : (
<Redirect to={{ pathname: "/login", state: { referer: props.location } }} />
)
}
/>
);
}
export default PrivateRoute
At login, everything works well. But when I try to log in to
/login
again, it doesn’t throw me back to thereferer
page. Although it should, otherwise why would the user once again see the login page, if he is already logged in.Is it possible to store LocalStorage, such as cookies, for 30 days?
If possible, please explain the logic of logging in to react. I understand it this way (correct if I am mistaken):
- user enters login and password
- in response, I send a TOKEN (if the username and password on the server side match)
- I load this token, for example in Mysql, store it there.
- the next time I log on to the site, I check if there is a token in the Mysql database (if so, leave it logged in - if not, then delete the row from the database and throw it on the login page). Right?)