Question

因此，从本质上讲，我正在尝试使用身份验证工作流程。因此，基本上，本地路由受保护，登录不受保护，注册不受保护，然后我有一个verifyEmail页面，如果您未通过验证，则会打开该页面。

const PrivateRoute = ({component: RouteComponent,...rest}) =>{
    const{currentUser}=useContext(AuthContext)

    function route (){

    }

    return(

        <Route
            {...rest}
            render={routeProps =>
                !!currentUser && currentUser != null
                    ?
                    currentUser.emailVerified ? <RouteComponent {...routeProps}/>:(<Redirect to={"/verifyEmail"}/>)
                    :
                    (<Redirect to={"/login"}/>)
            }
        />
    )


}
export default PrivateRoute

然后在App.js中，我有

function App() {
    return (
        <div className={'App'}>
            <AuthProvider>
                <Router>
                    <div>
                        <PrivateRoute path="/" component={HomePage}/>
                        <Route path="/verifyEmail" component={Verify}/>
                        <Route path="/login" component={Login}/>
                        <Route path="/register" component={Register}/>

                    </div>
                </Router>
            </AuthProvider>
        </div>
    );
}

export default App;

当前用户基本上是用户凭据，我正在使用Firebase进行身份验证。我遇到的问题是，登录后，它仅显示一个空白屏幕，显示未验证电子邮件，而不是显示verifyEmail页面。

要详细说明该问题，实际的问题是，如果用户未通过电子邮件验证，则路由到无处，并给我一个空白屏幕，因此<重定向到=“ / verifyEmail”无效。为了进一步调试，我决定用Hello 替换它，然后看到带有Hello的屏幕。因此，我认为身份验证不是问题，只是身份验证没有路由到适当的页面。

请帮助。

Answer 1

您可以创建一个HOC（组件）来包装您的路线，然后在此处进行验证。

示例：

import React, { useEffect } from 'react'
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';

export default function RequireAuth({ children }) {
    const history = useHistory();
    const auth = useSelector(state => state.auth)

    useEffect(() => {
        if(!auth){
            history.push("/")
        }
    }, [auth])

    return (
        <>
            {children}
        </>
    )
}

这是一个个人项目的示例，其中我使用react-redux来获取auth，女巫只是一个布尔值。如果用户未登录，我使用react-router-dom中的useHistory重定向到"/"。

最后在我的App.js中：

<div>
   <RequireAuth>
       <Route path='/post' component={PostPage} />
   </RequireAuth>
   <Route path='/' exact component={LoginPage} />
</div>

React Router在受保护的路由上显示黑屏

1 个答案: