Question

我的应用程序需要在用户登录后进行一系列Redux调度。这些分派必须先完成，然后才能根据商店的状态将用户重定向到页面。通过一些调试，我发现似乎是在用户登录并触发Firebase的onAuthStateChanged侦听器之后，该页面会自动将用户重定向到登录页面（然后应由react-router进行重定向）。当我声明重定向时。 有没有办法防止这种行为？

起初，我认为重定向是由分派触发的，但是在进行一些调试之后，我将行为范围缩小到身份验证更改。一旦用户已通过身份验证并执行页面刷新，我就可以验证一切是否正常。

// A bunch of imports before this

const store = configureStore()

const jsx = (
    <Provider store={store}>
        <AppRouter />
    </Provider>
)

let hasRendered = false

const renderApp = () => {
    if (!hasRendered) {
        store.dispatch(setApi()).then(() => {
            ReactDOM.render(jsx, document.getElementById('app'))
        })
        hasRendered = true
    }
}

ReactDOM.render(<LoadingPage />, document.getElementById('app'))

firebase.auth().onAuthStateChanged(async (user) => {
    if (user) {
        console.log('logged in')
        store.dispatch(login(user.uid))
        await store.dispatch(startGetProfiles(user.uid))

        const profiles = store.getState().profiles
        const selectedCharacterId = localStorage.getItem('selectedCharacterId')
        const profileId = selectedCharacterId || profiles.length === 1 && profiles[0].id

        if (profileId) {
            await store.dispatch(startSetProfile(user.uid, profileId))
        } 
        const profile = store.getState().profile

        renderApp()

        if (!!profile.id) {
            history.push('/profile')
        } else if (profiles.length > 0) {
            history.push('/select')
        } else {
            history.push('/create')
        }
    } else {
        console.log('logged out')
        store.dispatch(logout())
        renderApp()
        history.push('/')
    }
})

我希望页面重定向只会在我使用history.push（'/ somepage'）时发生，而重定向会在用户登录后立即触发。

Answer 1

好吧，这就是我所学到的-似乎正在发生的事情是，当更改路线中的道具时，就会发生刷新。我所有的路线如下所示：

export const PrivateRoute = ({
    isAuthenticated,
    component: Component,
    ...rest
}) => (
    <Route {...rest} component={(props) => (
        isAuthenticated ? (
            <Component {...props} />     
        ) : (
            <Redirect to="/" />
        )
    )} />
)

const mapStateToProps = (state) => ({
    isAuthenticated: !!state.auth && !!state.auth.uid
})

export default connect(mapStateToProps)(PrivateRoute)

请注意，在路由用户之前，我如何使用Redux来检查用户是否已通过身份验证。当向我的商店调度登录/注销操作的调用更新auth值时，这将更新isAuthenticated的路由属性，从而触发组件和路由链的更新。为了解决这个问题，我必须基本上创建新的路由来处理路由器在更新时正在做的事情，并从我的history.push()代码中删除onAuthStateChanged个调用。

所以要回答我的问题，Firebase不会触发页面重定向。在与React-Router一起使用Redux时，请注意对路由道具的更改，这些更改可能会触发组件更新和重新路由。

Firebase是否应onAuthStateChange自动触发页面重定向？

1 个答案: