javascript - React Redux with hooks - 身份验证和 protected 路由

Question

我正在使用带 hooks、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 等待一段时间以接收所有 Prop 并获取初始 isLoggedIn 状态？

Answer 1

不确定我完全理解你正在做的事情的背景，但这是我的想法。在您的 useEffect 中， isLoggedIn bool 值似乎正在控制重定向 bool 值，这可能会导致不需要的副作用。

试试这个

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