Попытка настроить компонент частного маршрута, который обновляется всякий раз, когда пользовательский authToken становится недействительным.
Вот частный маршрут:
const PrivateRoute = observer(({component: Component, ...rest}: { component: any, path: any }) => {
return (<Route {...rest} render = {(props: any) => (
authCredentialsStore.credToken
? <Component {...props} />
: <Redirect to='/login'/>
)}/>);
});
authCredentialsStore предоставляется через импорт.
Это магазин:
class AuthCredentialsStore {
@observable _authCredentials: AuthCredentials;
@observable credToken = this._authCredentials ? this._authCredentials.authToken : null;
set authCredentials(creds: AuthCredentials) {
this._authCredentials = creds;;
}
get authCredentials() {
return this._authCredentials;
}
removeCredentials() {
this._authCredentials = null;
}
}
export const authCredentialsStore = new AuthCredentials();
Затем в дочернем компоненте я делаю выборку на componentDidMount, и если выборка не удалась, я хочу сбросить хранилище и перенаправить пользователя на страницу входа:
class ChildComponent extends React.Component<any, any> {
fetchItems(): void {
const authToken = authCredentialsStore.credToken;
const options = {
method: 'GET',
headers: {
'Authorization': `${authToken}`
}
};
fetch('some_url', options)
.then(res => {
if (!res.ok) {
authCredentialsStore.removeCredentials();
}
return res.json();
})
.then(/*do something with results*/))
.catch(/*do error handling*/);
}
componentDidMount() {
this.fetchItems();
}
render() {...}
}
Я ожидаю, что authToken будет сброшен и автоматически запустит setState на частном маршруте, что приведет к его повторному рендерингу и перенаправлению на страницу входа, но этого не происходит с первого раза. Похоже, что пока authToken очищается в магазине, изменение в компоненте PrivateRoute не обнаруживается.





попробуйте присвоить значение
authCredentialsStore.credTokenлокальной переменной вне методаRouterenderи просто проверьте его. Я думаю, что теперь mobx не наблюдает за этим, потому что он находится в другой области действия.