Reactjs 验证流使用哪种生命周期方法?
我正在使用react路由器dom构建一个简单的react应用程序,其中包含身份验证流和导航。我试图构建的身份验证流是,当用户通过身份验证时,如果不是到/login,他将重定向到/dashboard路径 对于auth,我使用节点API和googleoauth2passport策略。 我有一个redux操作,它将请求发送到我的服务器,然后我将发送到reducer 我成功获取用户信息,但问题就在这里 启动应用程序时,直接向路由器呈现用户信息,此时她没有用户信息,因此我们不会重定向到/仪表板,但在执行名为应用程序的操作后,会呈现用户信息,但不会重新呈现页面 这是我的密码 AppRouter.jsReactjs 验证流使用哪种生命周期方法?,reactjs,redux,Reactjs,Redux,我正在使用react路由器dom构建一个简单的react应用程序,其中包含身份验证流和导航。我试图构建的身份验证流是,当用户通过身份验证时,如果不是到/login,他将重定向到/dashboard路径 对于auth,我使用节点API和googleoauth2passport策略。 我有一个redux操作,它将请求发送到我的服务器,然后我将发送到reducer 我成功获取用户信息,但问题就在这里 启动应用程序时,直接向路由器呈现用户信息,此时她没有用户信息,因此我们不会重定向到/仪表板,但在执行名
const AppRouter = ({fetchUser,auth}) => {
useEffect(() => {
fetchUser();
}, []);
console.log("App Router Signed in " ,auth);
return (
<BrowserRouter>
<Route exact path="/" render={() => <Redirect to={auth ? '/dashboard' : '/login'}/>}/>
<Switch>
<Route exact path="/login" component={Login} />
<PrivateRoute exact path="/dashboard" ><DashboardLayout/></PrivateRoute>
</Switch>
</BrowserRouter>
)
};
function mapStateToProps({ auth }) {
return { auth };
}
const mapDispatchToProps = dispatch => ({
fetchUser: () => dispatch(fetchUser())
});
export default connect(mapStateToProps, mapDispatchToProps)(AppRouter);
const AppRouter=({fetchUser,auth})=>{
useffect(()=>{
fetchUser();
}, []);
console.log(“应用程序路由器登录”,auth);
返回(
}/>
)
};
函数MapStateTops({auth}){
返回{auth};
}
const mapDispatchToProps=调度=>({
fetchUser:()=>分派(fetchUser())
});
导出默认连接(mapStateToProps、mapDispatchToProps)(批准者);
App.js
class App extends Component {
render() {
return (
<Provider store={store}>
<AppRouter/>
</Provider>
);
}
}
export default App;
类应用程序扩展组件{
render(){
返回(