Это основной компонент моего приложения Ionic4 (компонент "PrivateRoute" от реакции-маршрутизатора-частного):
const App: React.FC = (props: any) => {
const { userLogged } = props.logged;
return (
<IonApp>
<IonReactRouter>
<IonRouterOutlet id="principal">
<Route exact path="/" render={() => <Redirect to="/login" />} />
<Route exact path="/login" component={LoginPage} />
<PrivateRoute exact path="/dashboard" component={Dashboard} authStatus={userLogged.isLogged} redirectURL="/login" />
</IonRouterOutlet>
</IonReactRouter>
/>
</IonApp>
);
}
const mapStateToProps = (state: any) => {
return {
logged: state.logged,
};
}
export default connect(mapStateToProps)(App);
, а это мой компонент LoginPage:
const LoginPage: React.FC = (props: any) => {
const { userLogged } = props.logged;
const handleLogin = (inputs: any) => {
const user = {
"username": inputs.username,
"password": inputs.password,
};
axios.post(`URL`,
user,
)
.then(response => {
props.setLogged(response.data);
})
.catch(error => {});
}
return (
<>{userLogged.isLogged ?
<Redirect to="/dashboard" />
:
<IonPage>
<IonContent>
<>
<IonGrid>
<IonRow>
<IonCol
offsetXl="3" sizeXl="6"
offsetLg="2" sizeLg="8"
offsetMd="2" sizeMd="8"
offsetSm="1" sizeSm="10"
sizeXs="12">
<Login save={handleLogin} >
</Login>
</IonCol>
</IonRow>
</IonGrid>
</>
</IonContent>
</IonPage>
}
</>
);
};
const mapStateToProps = (state: any) => {
return {
logged: state.logged,
};
}
const mapDispatchToProps = {
setLogged,
};
export default connect(mapStateToProps, mapDispatchToProps)(LoginPage);
Компонент Login внутри LoginPage, является только формой, и не нужно go вдаваться в детали. Действие «setLogged» сохраняет только JSON с пользовательскими данными и токеном сеанса и изменяет переменную «isLogged» с редуктора на «true». Это действие работает правильно.
У меня проблема в следующем. Когда пользователь входит в систему, компонент «LoginPage» правильно обнаруживает, что переменная состояния «userLogged.isLogged» изменяется на «true», поэтому он отображает <Redirect> для компонента «Dashboard», но защищенный путь компонента «Dashboard» "не обнаруживает его (по крайней мере, так кажется). Если я размещу защищенный маршрут за пределами «IonRouterOutlet», он будет работать идеально. Но мне нужно, чтобы он был внутри «IonRouterOutlet», потому что мне нужно получить доступ к событию страниц Ioni c (useIonViewDidEnter). Как я могу это исправить? Либо путем правильной работы защищенного маршрута из «IonRouterOutlet», либо каким-либо образом имитируя «useIonViewDidEnter».
Я уже пробовал следующие защищенные маршруты:
<Route exact path="/dashboard"
component={userLogged.isLogged ? Dashboard : LoginPage}
/>
<Route exact path="/dashboard"
render={props => {
return userLogged.isLogged ? <Dashboard {...props} /> : <LoginPage />;
}}
/>
Заранее спасибо