Javascript 使用钩子响应Redux-身份验证和受保护的路由

我正在使用React with hook、React redux和redux thunk，我不确定我是否正确地进行了身份验证。在Main.js中，我调用了一个名为

checkIfLoggedIn（）

的操作。这是Main.js的主要内容：

class Main extends React.Component {
    constructor(props) {
        super(props);
        this.props.checkIfLoggedIn();

    }

    render() {
        return (
            <BrowserRouter>
                <div style={{position: 'relative'}}>
                    <Navbar/>
                    <div className={'container-fluid'}>
                        <Route exact path={'/'} component={(Dashboard)}/>
                        <Route exact path={'/sale'} component={(Sale)}/>
                        <Route exact path={'/settings'} component={(Settings)}/>
                        <Route exact path={'/login'} component={(Login)}/>
                    </div>
                </div>
            </BrowserRouter>
        )
    }
}

const mapDispatchToProps = {
    checkIfLoggedIn
};

export default connect(null, mapDispatchToProps)(Main);

我的初始状态是：

const initialState = {
    isLoggedIn: false,
    currentAdmin: {
    },
};

现在，我想创建一个ProtectedRoute，在我未登录时将我重定向到登录路径。我想在登录组件中做一些类似的东西，如果我登录的话，它会将我重定向到

'/'

路径

但在这两种情况下，我的prop isLoggedIn最初设置为false，并在几毫秒后更新。这是我的登录组件代码，未按预期工作：

const Login = props => {

    const dispatch = useDispatch();
    const [redirect, setRedirect] = useState(false);

    dispatch(checkIfLoggedIn());

    useEffect(() => {
            setRedirect(props.isLoggedIn);

    }, [props.isLoggedIn]);

    return redirect ? <Redirect to={'/'} /> : (
    /* the login form code */
    )
}

const Login=props=>{
const dispatch=usedpatch（）；
const[redirect，setRedirect]=useState（false）；
调度（checkIfLoggedIn（））；
useffect（（）=>{
setRedirect（props.isLoggedIn）；
}，[props.isLoggedIn]）；
返回重定向？：(
/*登录表单代码*/
)
}

---

表单会显示一会儿，然后我会被重定向到主路线。如何防止显示表单？我如何才能让一条私人路线等待片刻，以接收所有道具并获得初始isLoggedIn状态？

我不确定我是否完全理解您所做的事情，但以下是我的想法。在useEffect中，isLoggedIn布尔值似乎在控制重定向布尔值，这可能会导致不必要的副作用

试试这个

const Login = props => {

    const dispatch = useDispatch();
    const [redirect, setRedirect] = useState(false);

    dispatch(checkIfLoggedIn());

    useEffect(() => {
            // If user is not logged in, redirect them
            if (!props.isLoggedIn) {
            setRedirect(true)
     }

    }, [props.isLoggedIn]);

    return redirect ? <Redirect to={'/'} /> : (
    /* the login form code */
    )
}

---

我不确定我是否完全理解你所做的事情，但以下是我的想法。在useEffect中，isLoggedIn布尔值似乎在控制重定向布尔值，这可能会导致不必要的副作用

试试这个

const Login = props => {

    const dispatch = useDispatch();
    const [redirect, setRedirect] = useState(false);

    dispatch(checkIfLoggedIn());

    useEffect(() => {
            // If user is not logged in, redirect them
            if (!props.isLoggedIn) {
            setRedirect(true)
     }

    }, [props.isLoggedIn]);

    return redirect ? <Redirect to={'/'} /> : (
    /* the login form code */
    )
}

---

那么，您是否只想在用户未登录时重定向？如果登录用户（手动）进入/login路由，我想将其重定向到主路由。如果注销用户输入任何路由，我想将其重定向到/login路由。因此，您是否只想在用户未登录时重定向？如果登录用户（手动）输入/login路由，我想将其重定向到主路由。如果一个已注销的用户输入任何路径，我想将他重定向到/login路径。谢谢，但这不起作用。在添加

if（！props.isLoggedIn）{setRedirect（true）}

之后，即使我没有登录，我也总是被重定向

props.isLoggedIn

显示为false，几毫秒后再次显示为true。但是使用你的代码我会立即被重定向。哦，我一定是误解了，我以为如果你没有登录，你总是希望被重定向。谢谢，但这不起作用。在添加

if（！props.isLoggedIn）{setRedirect（true）}

之后，即使我没有登录，我也总是被重定向

props.isLoggedIn

显示为false，几毫秒后再次显示为true。但使用你的代码，我会立即被重定向。哦，我一定是误解了，我以为如果你没有登录，你总是希望被重定向

const Login = props => {

    const dispatch = useDispatch();
    const [redirect, setRedirect] = useState(false);

    dispatch(checkIfLoggedIn());

    useEffect(() => {
            // If user is not logged in, redirect them
            if (!props.isLoggedIn) {
            props.history.push('/redirectRoute')
     }

    }, [props.isLoggedIn]);

    return redirect ? <Redirect to={'/'} /> : (
    /* the login form code */
    )
}