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

Question

我正在使用带有钩子、react-redux 和 redux-thunk 的 React，我不确定我是否正确进行了身份验证。 在 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);

这是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
            });
        }
    }
};

而我的初始状态：

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

现在，我想提出一个ProtectedRoute将重定向我的登录路由时，我没有登录。我想使在登录组件类似的东西，那会重定向我的'/'如果我”路线我登录了。

但在这两种情况下，我的道具 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 */
    )
}

表单显示片刻，然后我被重定向到主路由。 如何防止显示表单？ 以及如何让 PrivateRoute 等待片刻以接收所有道具并获得初始 isLoggedIn 状态？

Answer 1

不确定我是否完全理解你在做什么，但这是我的想法。 在您的 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 */
    )
}

如果您使用的是 react-router，并且您使用withRouter高阶组件导出此组件，则最好使用history.push来完成您要完成的任务

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