Где я должен проверить, активен ли пользовательский сеанс?

Question

У меня проблема при проверке firebase.auth (). OnAuthStateChanged (), чтобы узнать, существует ли активный сеанс, поэтому пользователю не нужно входить в систему несколько раз. Проверка сеанса работает правильно, но это нарушает мой маршрутизатор.

Я реализовал это в App.js со следующим кодом:

import React from 'react';
import { Route } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';

import { auth } from './config/Firebase';
import { isUserLoggedIn } from './actions/Authentication';
import Log from './utils/Log';
import Navigation from './components/Navigation/Navigation';
import HomePage from './components/HomePage/HomePage';
import LoginPage from './components/LoginPage/LoginPage';

class App extends React.Component {
    state = {
        loading: true
    };

    componentWillMount = () => {
        Log.info('Will mount', 'App.js');
        const listener = auth.onAuthStateChanged(user => {
            if (user) {
                this.props.isUserLoggedIn(user);
                Log.info(user, 'App.js. User is set: ');
                this.setState({ loading: false });
                listener();
            } else {
                this.props.isUserLoggedIn({});
                Log.info('User was deleted', 'App.js');
                this.setState({ loading: false });
                listener();
            }
        });
    }

    render () {
        return (
            <div>
                {this.state.loading === true ? 
                    <h1>Loading</h1> 
                : 
                    <div>
                        <Navigation />
                        <div className="container">
                            <Route path="/" exact component={HomePage} />
                            <Route path="/login" component={LoginPage} />   
                        </div>
                    </div>
                }
            </div>
        ) 
    }
}

App.propTypes = {
    isUserLoggedIn: PropTypes.func.isRequired
};

export default connect(null, { isUserLoggedIn })(App);

Мой грязный код ReactDom.render выглядит следующим образом:

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunk)));

ReactDOM.render(
    <IntlProvider locale={language} messages={messages[language]}>
        <Provider store={store}>
            <BrowserRouter>
                <App />
            </BrowserRouter>
        </Provider>
    </IntlProvider>, document.getElementById('root')
);
registerServiceWorker();

isUserLoggedIn - это действие, которое отправляет текущего пользователя, если сеанс активен:

import { auth } from '../config/Firebase';

export const USER_LOGGED_IN = 'USER_LOGGED_IN';
export const SET_CURRENT_USER = 'SET_CURRENT_USER';

export const userLoggedIn = user => ({
    type: USER_LOGGED_IN,
    user
});
export const setCurrentUser = user => ({
    type: SET_CURRENT_USER,
    user
});

export const login = credentials => dispatch =>
    auth.signInWithEmailAndPassword(credentials.email, credentials.password)
    .then(user => dispatch(userLoggedIn(user.user)));

export const isUserLoggedIn = (user) => dispatch =>
    dispatch(setCurrentUser(user));

Я хочу, чтобы приложение находилось в состоянии «загрузки», пока объект «пользователь» не будет установлен в хранилище с избыточностью, которое я обрабатываю, когда монтируется App.js. Это работает правильно, однако, если я подключаю {isUserLoggedIn} к App.js, ссылки, которые вызывают разные маршруты, просто не работают. Если я вручную изменяю URL, он работает нормально, однако, если я нажимаю кнопку, которая связывает меня с другим компонентом, URL изменяется, но он не показывает мне компонент. Как только я удаляю линию соединения из App.js, ссылки снова начинают работать.

Ясно, что это не способ проверки сеанса, поскольку он нарушает маршруты, поэтому, где я должен его проверять, если это не App.js?

Answer 1

Ну, я решил это.

Я переместил BrowserRouter в App.js и также изменил способ рендеринга после входа пользователя в систему. Например:

render () {
    let {loading } = this.state;
    if (loading) {
        return <h1>Loading</h1>;
    } else {
        return (
            <BrowserRouter>
                <div>
                    <Navigation />
                    <div className="container">
                        <Route path="/" exact component={HomePage} />
                        <Route path="/login" component={LoginPage} />   
                    </div>
                </div>
            </BrowserRouter>
        );
    }
}

Теперь приложение продолжает загружаться до тех пор, пока не получит пользовательские данные, и, получив его, оно отображает все остальное, а также может перемещаться по приложению по ссылкам.

Похоже, что отдельные маршруты не могут быть установлены после того, как BrowserRouter уже находится в DOM, или что-то подобное, чего я не знал.