reactjs - i try to create authorization hoc which one rendering component if token in localstorage

Question

here is mine hoc for authorization code, its working correct only with one delay I need to refresh page to show component and flow is like this login page is sending post request in backend and geting jwt im saving generated token from backend in localstorage but hoc is no more colled after saving token in localstorage

    const WithToken = (Component) => {
    return class WrappedComponent extends React.Component {
        constructor() {
            super();
            this.state = {
                isAuthenticated: false
            }
        }

        componentDidMount() {
            const token = methods.getTokenFromLS();
            if (token !== null) {
                this.setState({ isAuthenticated: true });
            }
        }

        render() {
            if (this.state.isAuthenticated) {
                return (
                    <Component />
                )
            } else {
                return (
                    <Login />
                )
            }
        }

    }
}

export { WithToken };

here is App.js component

import { Route, Switch } from 'react-router-dom';
import { withRouter } from 'react-router-dom';
import { WithToken } from './helpers/WithToken';
import { methods } from './helpers/helperMethods';
import { Data } from './components/Data/Data';
import './App.css';
import { Login } from './components/authorization/Login/Login';

const App = () => {

  return (
    <div className='App'>
      <Switch>
        <Route exact path='/' component={WithToken(Data)} />
      </Switch>
    </div>
  )
}

export default withRouter(App);

login.js

const Login = () => {
const [colorTheme, setTheme] = useState(false);
const [fieldsConfig, setValue] = useState(authFieldsConfig);

const handleChange = (event) => {
    setTheme(event.target.checked);
};

const onHandleChange = (value, id) => {
    setValue(prevState => {
        const newState = [...prevState];
        const index = newState.findIndex(element => element.id === id);
        newState[index].value = value;
        return newState;
    });
};

const fieldsValidation = () => {
    const newState = [...fieldsConfig];
    for (let i = 0; i < newState.length; i++) {
        if (newState[i].value.length < newState[i].valueLength) {
            return setValue(() => {
                newState[i].error = true;
                return newState;
            });
        };
    };
    return authorizeUser();
};

const authorizeUser = () => {
    const [email, password] = [...fieldsConfig];

    axios.post(`${methods.localHost}login`, { email: email.value, password: password.value })
        .then(res => {
            if (res.data.data.token) {
                return methods.setTokenInLS(res.data.data.token);
            };
        })
        .catch(err => {
            console.log('err', err);
        })
};

return (
    <div style={colorTheme ? themeMode.dark : themeMode.light}>
        <h1 style={colorTheme ? themeMode.h1.dark : themeMode.h1.light}>Login</h1>
        <div className={colorTheme ? 'item-wrapper-dark' : 'item-wrapper'}>
            <div className='switch-wrapper'>
                <Switch
                    checked={colorTheme}
                    onChange={handleChange}
                    name="colorTheme"
                    color="primary"
                />
            </div>
            <div className='inputs-wrapper'>
                {fieldsConfig.map(element => {
                    return <TextField
                        key={element.id}
                        id={element.id}
                        type={element.type}
                        value={element.value}
                        onChange={e => onHandleChange(e.target.value, e.target.id)}
                        label={element.label}
                        InputProps={element.startAdornment}
                        error={element.error}
                    />
                })}
                <Button
                    variant="contained"
                    color="primary"
                    onClick={fieldsValidation}
                >
                    Sign in
                </Button>
                <RegistrationDash />
            </div>
        </div>
    </div>
);

};

Answer 1

等待大神答复