Question

今天我尝试制作一个带有“记住我”功能的登录页面。我使用 Redux 和 React，通常我确保我可以在 localStorage 中保存令牌并且它工作正常。不幸的是，当我使用 sessionStorage 选中“记住我”并生成错误时，当我创建逻辑时：

错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，就会发生这种情况。 React 限制嵌套更新的数量以防止无限循环。

 dispatch({
            type: authConstants.LOGIN_SUCCESS,
            payload: {
                token,
                user,
            },
        });

这是我的代码：

export const login = (input) => {
const { isRemember, ...inputUser } = input;

return async (dispatch) => {
    dispatch({
        type: authConstants.LOGIN_REQUEST,
    });
    const res = await callAPI.post(`/admin/login`, {
        ...inputUser,
    });

    if (res.status === 200) {
        const { token, user } = res.data;
        if (isRemember) {
            localStorage.setItem("token", token);
            localStorage.setItem("user", JSON.stringify(user));
        } else {
            sessionStorage.setItem("token", token);
            sessionStorage.setItem("user", JSON.stringify(user));
        }
        dispatch({
            type: authConstants.LOGIN_SUCCESS,
            payload: {
                token,
                user,
            },
        });
    } else {
        if (res.status === 400) {
            dispatch({
                type: authConstants.LOGIN_FAILURE,
                payload: {
                    err: res.data.err,
                },
            });
        }
    }
};

更新... 我修复了它，这是我忘记在 sessionStorage 中检查令牌时的错误逻辑。因为我的privateRouter 使用令牌，当我们登录时没有使用正确的令牌时，无限循环运行。（登录 => auth OK => privateRouter not auth => auth OK ....）

const PrivateRoute = ({ component: Component, ...rest }) => {
return (
    <Route
        {...rest}
        component={(props) => {
            const token = localStorage.getItem("token") 
            if (token) {
                return <Component {...props} />;
            } else {
                return <Redirect to={"/"} />;
            }
        }}
    />
);

};

之后：

  const token = localStorage.getItem("token") ? localStorage.getItem("token") : sessionStorage.getItem("token");

为什么当 localStorage 工作正常时我不能使用 sessionStorage？

0 个答案: