无法读取未定义的 reactjs Jwt Auth 的属性“令牌”答案

【问题标题】：Cannot read property 'token' of undefined reactjs Jwt Auth无法读取未定义的 reactjs Jwt Auth 的属性“令牌”
【发布时间】：2021-07-05 08:13:49
【问题描述】：

Cannot read property 'token' of undefined Screenshot Attached

// Auth Service.js
    const login = (username, password) => {
  return axios
    .post(API_URL + "signin", {
      username,
      password,
    })
    .then((response) => {
      if (response.data && response.data.data && response.data.data.token) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }

      return response.data;

    })
    .catch((err) => {
      console.log("An error occured: ", err);
    });
};

如果凭据不正确，我会收到此错误，如果登录详细信息正确，它可以正常工作，而且我想显示电子邮件或密码是否错误我想获取 API 服务器响应消息并显示响应消息下面的登录按钮。有人请帮助我

// Auth.js
export const login = (username, password) => (dispatch) => {
  return AuthService.login(username, password).then(
    (data) => {
      dispatch({
        type: LOGIN_SUCCESS,
        payload: { user: data },
      });

      return Promise.resolve();
    },
    (error) => {
      const message =
        (error.response &&
          error.response.data &&
          error.response.data.message) ||
        error.message ||
        error.toString();

      dispatch({
        type: LOGIN_FAIL,
      });

      dispatch({
        type: SET_MESSAGE,
        payload: message,
      });

      return Promise.reject();
    }
  );
};

// Login.js
 const handleLogin = (e) => {
    e.preventDefault();

    setLoading(true);

    form.current.validateAll();

    if (checkBtn.current.context._errors.length === 0) {
      dispatch(login(username, password))
        .then(() => {
          props.history.push("/home");
          window.location.reload();
        })
        .catch(() => {
          setLoading(false);
        });
    } else {
      setLoading(false);
    }
  };

  if (isLoggedIn) {
    return <Redirect to="/home" />;
  }

【问题讨论】：

标签： javascript reactjs jwt

【解决方案1】：

您收到该错误的原因是 response.data.data 属性未定义，并且在凭据无效时发生。您应该看到服务器返回了什么，并根据该处理响应并向用户显示相关消息。

您可以做的是通过添加一个 and 条件来使您的 if 条件更加严格。就像这样，只有在从服务器接收到令牌属性时，才会在 localStorage 中设置用户：

if (response.data && response.data.data && response.data.data.token) {
    localStorage.setItem("user", JSON.stringify(response.data));
}

// handle the case where the response is not as expected.
if (response.data && !response.data.data) {
    // show error to the user and clear user info in localStorage.
    // localStorage.setItem("user", null);
    // return something
}

并添加一个 catch 块来处理服务器错误。

【讨论】：

现在它只是加载主页而没有显示错误，如果密码或电子邮件无效，页面不应重定向，你能简单解释一下
我已经更新了代码，即使登录凭据不正确，请看一下它并重定向到主页
我已经更新了答案。基本上你需要处理凭证无效的情况。

【解决方案2】：

您可以在localStorage中设置一个默认的用户对象，然后检查它是否不为空或未定义。

const login = (username, password) => {
  return axios
    .post(API_URL + "signin", {
      username,
      password,
    })
    .then((response) => {
      if (response.data.data.token) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }

      return response.data;

    }).catch((err)=>{
        localStorage.setItem("user", JSON.stringify({user: {token: null}}));
    });
};

【讨论】：

我正在本地存储中获取此信息，并因此显示注销{user: {token: null}} user: {token: null} token: null

【解决方案3】：

您可以通过在then() 之后链接catch() 来处理catch 块中的错误

const login = (username, password) => {
  return axios
    .post(API_URL + "signin", {
      username,
      password,
    })
    .then((response) => {
      if (response.data.data.token) {
        localStorage.setItem("user", JSON.stringify(response.data));
      }

      return response.data;

    }).catch((err)=>{
        console.log("An error occured: ", err);
    });
};

【讨论】：