React Redux with hooks - 身份验证和受保护的路由

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，在我未登录时将我重定向到 Login 路由。我想在 Login 组件中做类似的事情，将我重定向到 '/' 路由如果我已登录。

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

表单显示片刻，然后我被重定向到主路由。如何防止显示表单？以及如何让 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 */
    )
}