如果本地存储中的令牌

Question

这是我的授权代码，它的工作正常只有一个延迟我需要刷新页面以显示组件和流程就像这个登录页面在后端发送发布请求并获得 jwt 即时保存 在localstorage中从后端生成令牌，但在localstorage中保存令牌后不再收集hoc

    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 };

这里是 App.js 组件

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);

登录.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>
);

};