У меня есть URL: /user/Jd5Egbh...
Я использую реагирующий маршрутизатор-дом для навигации.Я сделал компонент UserDetails.Я использую mapStateToProps
для получения параметров URL, например:
function mapStateToProps({ users }, ownProps) {
return { user: users[ownProps.match.params.uid]};
}
Он работает нормально, но я хотел бы защитить этот маршрут и разрешить доступ только для аутентифицированных пользователей.
В других компонентах,Я использую компонент withAuthorization
и составляю компоновку для защиты маршрута.
Я попытался объединить эти две функции, как показано ниже:
export default compose(
withAuthorization(authCondition),
connect(mapStateToProps, { fetchUser })
)(UserDetails);
Но ownProps
равен undefined
вmapStateToProps
function
Как получить доступ к параметрам URL, если я использую compose для защиты маршрута?
EDIT1:
import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { withRouter } from 'react-router-dom';
import { firebase, db, auth } from '../firebase';
const withAuthorization = (condition) => (Component) => {
class WithAuthorization extends React.Component {
componentDidMount() {
firebase.auth.onAuthStateChanged(authUser => {
if (!condition(authUser)) {
this.props.history.push('/');
} else {
db.onceGetUser(authUser.uid).then(snapshot => {
let user_data = snapshot.val();
if (!user_data.admin) {
auth.doSignOut();
}
});
}
});
}
render() {
return this.props.authUser ? <Component /> : null;
}
}
const mapStateToProps = (state) => ({
authUser: state.auth.authUser,
});
return compose(
withRouter,
connect(mapStateToProps),
)(WithAuthorization);
}
export default withAuthorization;