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

Question

I am using React with hooks, react-redux and redux-thunk and I'm not sure if I made the authentication correctly. In Main.js I'm calling an action called checkIfLoggedIn() . This is the Main.js content:

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

This is the code of checkIfLoggedIn()

import {SET_ADMIN, SET_LOGGED_IN} from "./types";
import axios from 'axios';

export const checkIfLoggedIn = () => async dispatch => {
    const adminToken = window.localStorage.getItem('admin_token');
    if (adminToken === null)
        dispatch({
            type: SET_LOGGED_IN,
            payload: false
        });
    else {
        try {
            const r = await axios.get('/users/me');
            const data = r.data;
            dispatch({
                type: SET_ADMIN,
                payload: data
            });
            dispatch({
                type: SET_LOGGED_IN,
                payload: true
            });

        } catch (e) {
            dispatch({
                type: SET_LOGGED_IN,
                payload: false
            });
        }
    }
};

And my initial state:

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

Now, I'd like to make a ProtectedRoute that will Redirect me to the Login route when I'm not logged in. I wanted to make something similar in the Login component, that would Redirect me to the '/' route if I'm logged in.

But in both cases, my prop isLoggedIn is initially set to false, and gets updated after few milliseconds. This is my Login component code that didn't work as expected:

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 */
    )
}

The form is displayed for a moment, and after that I'm redirected to the main route. How can I prevent displaying the form? And how can I make a PrivateRoute waiting a moment to receive all the props and getting the initial isLoggedIn status?

Answer 1

Not sure I completely understand the context of what you are doing, but here are my thoughts. In your useEffect, the isLoggedIn boolean seems to be controlling the redirect boolean, which may be causing unwanted side effects.

Try this instead

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 */
    )
}

If you are using react-router, and you export this component usint the withRouter higher order component, it may be better to use history.push for what you are trying to accomplish

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 */
    )
}