Я защищаю маршруты, используя избыточные состояния. То, что я делаю, это когда пользователь входит в систему, я обновляю избыточное состояние isAuthenticated в signIn компоненте и получаю это состояние в моем AllRoutes компоненте, а затем я передаю его по своему пользовательскому маршруту ProtectedHomeRoute в качестве подпорки. Все работает нормально, но проблема в том, что когда я обновляюсь, я получаю isAuthenticated значение false, которое является его значением по умолчанию, поэтому ProtectedHomeRoute перенаправляет меня на Login страницу.
Пожалуйста, предложите мне лучший способ обновления браузера в вышеупомянутом случае использования.
Я попытался решить эту проблему таким образом, что я выполнил новое действие с именем isLoggedIn, в этом я вызываю API для проверки состояния входа в систему, если в случае ответа я передаю значение true в полезной нагрузке
тогда я называю это действие в componentDidMount образ жизни AllRoutes
так что когда браузер обновится, будет вызван isLoggedIn и я получу предыдущее состояние, но ничего не происходит, вот так.
Это код isLoggedIn действия
export function isLoggedIn() {
axios.get("http://localhost:8080/api/checkLoginStatus").then(res => {
let data = res.data;
let tid = data.data; // data contain userId
console.log(tid);
let isAuthenticate = false
if(tid){
isAuthenticate = true;
}
return dispatch => {
dispatch({
type: "isLoggedIn",
payload: isAuthenticate
});
};
})
}
Это код редуктора
const INITIAL_STATE = {
isAuthenticate: false
};
export default (states = INITIAL_STATE, action) => {
switch (action.type) {
case "loggedIn":
return {
...states,
isAuthenticate: action.payload
};
case "logOut":
return {
...states,
isAuthenticate: action.payload
};
case "isLoggedIn":
return {
...states,
isAuthenticate: action.payload
};
default:
return states;
}
};
Код компонента AllRouts
import { isLoggedIn } from "./store/action/authAction";
import axios from 'axios';
class AllRoutes extends React.Component {
componentDidMount() {
isLoggedIn();
}
render() {
console.log(this.props.isAuthenticate);
return (
<Router>
<Switch>
<Route path="/auth/signup" component={Signup} />
<Route path="/auth/signin" component={Signin} />
<Route path="/auth/forgot" component={Forgot} />
<Route exact path="/stock" component={Products} />
<Route exact path="/stock/detail/:id" component={Manage} />
<ProtectedHomeRoute
exact
path="/"
component={<Home />}
isAuthenticate={this.props.isAuthenticate}
/>
</Switch>
</Router>
);
}
}
// to access redux stats as props in this component
function mapStateToProps(state) {
return {
isAuthenticate: state.authReducer.isAuthenticate
};
}
function mapDispatchToProps(dispatch) {
return {
userAuthenticate: a => {
dispatch(isLoggedIn(a));
}
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(AllRoutes);
// protected route for Home component
const ProtectedHomeRoute = ({ component, isAuthenticate, ...rest }) => {
console.log("protected route", isAuthenticate);
return (
<Route
{...rest}
render={props =>
isAuthenticate ? component : <Redirect to="/auth/signin" />
}
/>
);
};