Я встроил авторизацию в свое приложение React, используя passport.js, и мне хотелось бы, чтобы в моем файле App.js были получены маршруты авторизации, чтобы увидеть, вошел ли пользователь в приложение или никто не вошел в систему..
Чтобы помочь с этим вопросом, я поделился сжатой версией файла App.js моего приложения React и файла Index.js.
// App.js File
// Import React Libraries, Routes, Container Pages
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Route } from 'react-router-dom';
import { userActions } from './actions/auth/auth-actions.js';
import GameLanding from './containers/StatsPages/Game/GameLanding';
import AppFooter from './components/AppFooter';
// And Create The App
class App extends Component {
constructor(props, context) {
super(props, context);
}
componentDidMount() {
this.props.dispatch(userActions.authorize());
}
render() {
return (
<div>
<Route exact path='/stats/games' render={() => <GameLanding userInfo={this.props.userInfo} />} />
<AppFooter />
</div>
);
}
}
// export default App;
function mapStateToProps(reduxState) {
return {
userInfo: reduxState.authorizedReducer.userInfo,
authorized: reduxState.authorizedReducer.authorized,
loading: reduxState.authorizedReducer.loading
};
}
export default connect(mapStateToProps)(App);
... всего моего приложения.js-файл содержит ~ 15 компонентов Routes, и (моя часть) моя цель с моим файлом App.js - получить реквизиты authorized и userInfo и передать их компонентам по различным маршрутам.Я показал пример, где я передаю реквизит userInfo компоненту GameLanding.
Вот как я настроил свой файл Index.js.
// Index.js
// Import Libraries
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
// Import CSS and the App
import App from './App';
import 'react-table/react-table.css';
import './index.css';
import './App.css';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root'));
Моя текущая проблеманапример: По какой-то причине загрузка реквизитов userInfo и authorized разрушает мое приложение.К сожалению, я не получаю сообщений об ошибках ... скорее, все ссылки реактивного маршрутизатора в моем приложении просто не работают ... щелчок по ним меняет URL, но страницы моего приложения больше не меняются ...
Тогда мои вопросы: (а) мне разрешено получать данные авторизации в App.js так, как я это делаю (используя connect, mapStateToProps и т. Д.), Или я все делаю неправильно?
Независимо от того, вошел ли кто-либо в мое приложение или нет, это вещь для всего приложения, а не для конкретной страницы, и я решил по этой причине (также для предотвращения необходимости извлекать реквизиты аутентификации во многих страницах-контейнерах)что App.js - лучшее место, чтобы взять эти реквизиты.
Будем весьма благодарны за любые мысли о том, почему мое приложение ломается или как должен выглядеть мой файл App.js (я уверен, что мой index.js в порядке на 99%)!Спасибо!
Редактировать: Для справки выполните следующие действия: (i) импорт userActions, (ii) вызов userActions.authorize () в componentDidMount, (iii) включая mapStateToProps и подключитесь книжняя часть приложения и т. д. работает для загрузки реквизитов аутентификации в любой из моих компонентов контейнеранапример, если бы у меня был этот код в моем компоненте GameLanding, он не нарушает общеинформационные ссылки реакции-маршрутизатора-домена так же, как это происходит, когда этот код находится в App.js.Отсюда и название вопроса.Спасибо!