Нежелательный возврат в логин, когда я обновляю sh страницу?

Question

У меня проблема с управлением аутентификацией в моем приложении, оно на самом деле работает, но проблема в том, что при обновлении sh страница перенаправляется на страницу входа, даже если я не вышла из системы! Вот код страницы маршрутов:

export const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 1000)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 1000)
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }} />
  )} />
)

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      <Route path="/login" component={Login} />
      <PrivateRoute path="/admin" component={AdminLayout} />
      <Redirect to="/admin/dashboard" />
    </Switch>
  </Router>,
  document.getElementById("root")
);

А вот код компонента Login:

export class Login extends Component {
    state = {
        email: '',
        password: '',
        redirectToReferrer: false,
    }

    async login() {
        const email = this.state.email
        const password = this.state.password
        await fakeAuth.authenticate(() => {
            this.setState({
                redirectToReferrer: true
            })
        })

        /*axios.post(`${API_URL}login`, { email, password })
            .then(async (response) => {
                this.setState({
                    redirectToReferrer: true
                })
                //alert(response.data.admin.email + " est connecté !")
                           })*/
    }

    render() {
        const { from } = this.props.location.state || { from: { pathname: '/admin' } }
        console.log(from)
        if (this.state.redirectToReferrer === true) {
            return <Redirect to={from} />
        }
        return (
            <>
                <PanelHeader size="sm" />
                <div className="content">
                    <Row>
                        <Col md="3"></Col>
                        <Col md="6">
                            <Card>
                                <CardHeader>
                                    <h1 className="title"
                                        style={{ textAlign: "center" }}
                                    >Login</h1>
                                </CardHeader>
                                <CardBody>
                                    <Form>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup>
                                                    <h6>Email</h6>
                                                    <Input
                                                        placeholder="Email"
                                                        type="email"
                                                        required
                                                        onChange={(e) => {
                                                            var email = e.target.value
                                                            this.setState({ email: email })
                                                        }}
                                                    />
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup>
                                                    <h6>Mot de passe</h6>
                                                    <Input
                                                        placeholder="Mot de passe"
                                                        type="password"
                                                        onChange={(e) => {
                                                            var password = e.target.value
                                                            this.setState({ password: password })
                                                        }}
                                                    />
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col md="12">
                                                <FormGroup style={{ left: "40%" }}>
                                                    <Button outline color="info" size="lg"
                                                        onClick={this.login.bind(this)} className="btn-round">Login</Button>
                                                </FormGroup>
                                            </Col>
                                        </Row>
                                    </Form>
                                </CardBody>
                            </Card>
                        </Col>
                        <Col md="3"></Col>
                    </Row>
                </div>
            </>
        )
    }
}

Есть идеи, что мне делать?

Answer 1

Вам нужно где-то сохранить свое аутентифицированное состояние и проверить его при загрузке приложения. React - это инфраструктура веб-интерфейса, и если вы перезагрузите приложение, оно вернется в состояние по умолчанию, поскольку у платформы нет возможности сохранить постоянное состояние с помощью перезагрузок, поэтому вы как будто впервые появляетесь в своем приложении. Есть несколько различных способов go об этом, но самые простые - это localStorage или cook ie.

Когда вы аутентифицируетесь, вы можете сохранить в localStorage следующим образом:

async login() {
    const email = this.state.email
    const password = this.state.password

    await fakeAuth.authenticate(() => {
        //Set an item to browsers localStorage
        localStorage.setItem("Auth", "Your auth state here");

        this.setState({
            redirectToReferrer: true
        })
    })
}

Затем вы можете проверить localStorage, когда ваше приложение загружается, чтобы увидеть, вошел ли пользователь в систему следующим образом:

localStorage.getItem('Auth');

Вы можете прочитать о браузерах localStorage здесь Браузеры LocalStorage

К вашему сведению: я понимаю, что вы находитесь на начальных этапах настройки аутентификации, но обычно вы должны передать токен аутентификации или токен сеанса из своего бэкэнда, а затем проверить этот токен для каждого маршрута, чтобы убедиться, что пользователь вошел в систему. Просто заявить, что пользователь вошел в веб-интерфейс, невероятно небезопасно. Каждый маршрут должен быть защищен определенным типом меры аутентификации. Вы можете посмотреть Json веб-токены или что-то в этом роде. Затем вы можете передать токен в свой интерфейс и сохранить этот токен в localStoage. Затем, когда ваше приложение загружается, вы можете проверить этот токен, чтобы узнать, аутентифицирован ли пользователь или нет, и проверить действительный токен для каждого маршрута.