我有一个简单的应用程序,带有auth和private route,如果用户有token,我想从服务器上获取数据,后端准备好了,工作正常,我登录时,redux里有用户的数据,但我不知道如何处理刷新页面,我应该在哪里做dispath来调用动作? 如果我在privateRoute.js里做,工作很奇怪,我想调用服务器的,但我做了3-4次。
下面是我的组件,没有调用sessionActions,sessionActions应该更新loggedIn,用户会进入登录页面。
私家路由
import React, { useState, useEffect } from 'react';
import { Route, Redirect } from 'react-router-dom';
import PropTypes from 'prop-types';
import sessionAction from '../store/actions/sessionAction';
const PrivateRoute = ({ component: Component, ...rest }) => {
const { path, dispatch, loggedIn } = rest;
});
return (
<Route
path={path}
render={(props) => (loggedIn ? <Component {...props} />
<Component {...props}/>
: (<Redirect to="/login" />))}
/>
);
};
PrivateRoute.propTypes = {
component: PropTypes.func.isRequired,
};
export default PrivateRoute;
sessionAction
const sessionAction = (path) => (dispatch) => {
return sessionServices(path)
.then((response) => {
console.log(response);
const { data } = response;
if (!data.error) {
dispatch(success(data));
}
dispatch(failure(data.error.text));
})
.catch((error) => error);
};
会话服务
import axios from 'axios';
axios.defaults.withCredentials = true;
const sessionServices = (path) => axios({
method: 'post',
url: `http://localhost:4000/api/pages${path}`,
})
.then((response) => response)
.catch((error) => console.log(error));
export default sessionServices;
你必须在你的App comonent中调度从服务器获取用户数据的动作,App comonent是顶层组件。同时在reducer中保持一个加载状态,呈现一个Loader,直到用户数据被获取。
const App = props => {
useEffect(() {
this.props.sessionActions('/session')
}, []);
if(this.state.isLoading) return <Loader />;
const { loggedIn, user } = this.props;
return (
<Router>
{/* Your Private routes and otehr routes here */}
</Router>
)
}
const mapStateToProps = (state) => {
return {
isLoading: state.auth.isLoading,
user: state.auth.user,
loggedIn: state.auth.loggedIn
}
}
export default connect(mapStateToProps, { sessionAction })(App);