Я использую приёмную-реактивную-реактивно-базисную базу вместе с реактивно-маршрутизатор-редуксом и реактивно-маршрутизатором.
При входе в систему пользователя с подключенной формой в форме редукса в функции обратного вызова onSubmit я использую функциюact-redux-firebase из withFirebase HOC, которая называется props.firebase.login().В ответ на это обещание я пытаюсь использовать реагирующий маршрутизатор для перехода к моему «защищенному» представлению.
Это все работает хорошо и выглядит так:
export default withFirebase(
connect(mapStateToProps, mapDispatchToProps)(
reduxForm({
form: SINGLE_PAGE_FORMS.login,
onSubmit: (values, dispatch, props) => {
const { firebase } = props;
const { username: email, password } = values;
firebase.login({
email,
password,
}).then(response => {
if(!!response) {
dispatch(
openNotificationCenterAC({ message: 'Successfully logged in!', messageType: MESSAGE_TYPE_SUCCESS })
);
// The problem here with login is that the Private Route has not yet seen the Uid update and therefore
// won't load a private route. I need to know the UID is in state before navigating to dashboard.
dispatch( push( ROUTE_OBJS.SECURED[ROUTES.DASHBOARD].path ) );
dispatch( reset(SINGLE_PAGE_FORMS.login) );
}
}).catch(error => {
dispatch(
openNotificationCenterAC({ message: error.message, messageType: MESSAGE_TYPE_ERROR })
);
});
},
})(LoginContainerView)
)
);
Проблема (как видно в комментариях) состоит в том, что я (сегодня) переключился на использование действительно классного нового способа сделать некоторые из моих маршрутов приватными.Я использовал примеры, найденные в этой ссылке здесь , чтобы создать эту концепцию.
Мой частный компонент выглядит следующим образом:
export default class PrivateRouteView extends Component {
render() {
const {
key,
auth,
path,
renderRoute,
showErrorMessage,
} = this.props;
const { uid } = auth;
return (
<Route
exact
key={key}
path={path}
render={
(!!uid && isLoaded(auth) && !isEmpty(auth)) ? renderRoute :
props => {
return (
<Redirect
to={{
pathname: '/login',
state: { from: props.location }
}} />
);
}
} />
);
}
}
Пропорка auth здесьwithFirebase HOC-инъекция.Он прикреплен к this.props.firebase.auth.
Проблема
При каждом успешном входе в систему возвращайте мне пользовательские данные в функции .then функции firebase.login() обещаю ... к тому времени, когда я получу отправку навигации .push, PrivateRoute перерисовал без нового объекта auth и никогда не перерисовывает.
Я могу пройти и посмотреть.Идет:
- Успешный вход в систему
- Вход в
.then функция - Уведомление пользователя об успешном входе в систему
- Смена навигации в представлении панели управления
- Компонент PrivateRoute повторно выполняет рендеринг и видит отсутствие UID или аутентификации
firebase.login обещание полностью решено - Обновление состояния приложения завершено, и firebase.auth теперь имеет Uid и все другие профили / авторизациюобъекты в состоянии
- Контейнер для реагирующего маршрутизатора BrowserRouter, Switch и Route работают нормально
- Представление, прикрепленное к этому контейнеру, прекрасно воспроизводится, вплоть до функции, в которой я возвращаю компоненты PrivateRoute
- Метод визуализации PrivateRoute никогда не достигается при втором рендеринге, когда пользовательские данные
firebase.login в конечном итоге переводят его в состояние объекта firebase.auth.Так что теперь я авторизован, однако он никогда не видит новый объект аутентификации из-за отсутствия рендеринга ...