Где в приложении на React хранить флаг авторизирован ли пользователь или нет

145

01 ноября 2019, 05:40

Имеется компонент:

import React from 'react';
import {  Route, Switch, Redirect } from 'react-router-dom';
const Header = React.lazy(() => import('./Components/Header/Header'));
const RegistrationForm = React.lazy(() => import('./Components/Forms/RegistrationForm/RegistrationForm'));
const LogonForm = React.lazy(() => import('./Components/Forms/LogonForm/LogonForm'));
import ContentLayout from './Layouts/ContentLayout/ContentLayout';
import DepartmentForm from './Components/Forms/DepartmentForm/DepartmentInput';
import './App.css';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loggedIn: false
        };
        this.logIn = this.logIn.bind(this);
    }
    logIn() {
        this.setState({
            loggedIn: true
        })
    }
    render() {
        return (
            <React.Fragment>
                <Header />
                    <Switch>
                        <Route exact path="/" render={ () => (this.state.loggedIn ? (<DepartmentForm/>) : (<Redirect to="/login"/>))}/>
                        <Route exact path="/login" render={ () =>  <LogonForm logIn={ this.logIn } />  } />
                        <Route exact path="/registration" render={ (props) => <RegistrationForm {...props} /> } />
                    </Switch>
            </React.Fragment>
        )
    }
};

Флаг авторизации я храню в state. Насколько это правильно? И как сделать чтоб при обновлении страницы это состояние не сбрасывалось?

Answer 1

Храните признак того, что пользователь авторизован в localStorage, таким образом при перезагрузке страницы это состояние не будет сбрасываться.

Свойство localStorage позволяет получить доступ к локальному Storage объекту. Данные в свойстве localStorage не имеют ограничений по времени хранения и могут быть удалены только с помощью JavaScript, то есть не имеют определенного времени жизни.

Пример использования:

constructor(props) {
  super(props);
  this.state = {
    loggedIn: !!localStorage.getItem('loggedIn'),
  };
}
logIn() {
  this.setState({ loggedIn: true });
  localStorage.setItem('loggedIn', 'yes');
}
logOut() {
  this.setState({ loggedIn: true });
  localStorage.removeItem('loggedIn');
}

Вот такой простой пример использования localStorage в качестве хранилища. Полезные ссылки для ознакомления и изучения: