身份验证流程使用哪种生命周期方法?

时间:2020-04-30 17:34:25

标签: reactjs redux

我正在构建一个具有身份验证流和带有react-router dom导航的简单React应用。我要构建的身份验证流是在对用户进行身份验证时将其重定向到/ dashboard路径(如果不是/ login的话)。

对于身份验证,我正在将节点API与Google OAuth 2护照策略配合使用。 我有一个redux动作,将请求发送到我的服务器,然后分派到reducer。

我成功获得了用户信息,但是问题出在这里。

启动应用程序时,直接渲染路由器,这时她没有用户信息,因此我们没有重定向到/ dashboard,但是在调用该应用程序的操作之后,该用户信息却没有重新渲染页面

这是我的代码

AppRouter.js

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);

App.js

class App extends Component {
render() {
return (
    <Provider store={store}>
        <AppRouter/>
    </Provider>
);
  }
}
export default App;

您还可以在我的Google控制台上查看一下,您会看到我首先是auth = null,但是在auth等于我的用户对象之后

也许我需要使用不同的LifeCycle方法?

Google Console

0 个答案:

没有答案