Javascript 无法读取属性'；代币'；未定义的reactjs Jwt Auth的

如果凭据不正确，我会收到此错误；如果登录详细信息正确，则工作正常；如果电子邮件或密码错误，我会显示；我会获取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
常量handleLogin=（e）=>{
e、 预防默认值（）；
设置加载（真）；
form.current.validateAll（）；
如果（检查btn.current.context.\u errors.length==0）{
发送（登录名（用户名、密码））
.然后（（）=>{
道具。历史。推送（“/主页”）；
window.location.reload（）；
})
.catch（（）=>{
设置加载（假）；
});
}否则{
设置加载（假）；
}
};
如果（isLoggedIn）{
返回；
}

您可以通过在

then（）之后链接
catch（）
来处理catch块中的错误


const login=（用户名、密码）=>{
返回轴
.post（API_URL+“登录”{
用户名，
密码，
})
。然后（（响应）=>{
if（response.data.data.token）{
setItem（“user”，JSON.stringify（response.data））；
}
返回响应数据；
}).catch（（错误）=>{
log（“发生错误：”，err）；
});
};您可以在localStorage中设置默认用户对象，然后检查它是否为null或未定义

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

获取该错误的原因是
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块来处理服务器错误。
现在只需加载主页而不显示错误，如果密码或电子邮件无效，页面不应重定向，你能简单地解释一下吗？我已经更新了代码。请看一下，即使登录凭证不正确，也可以重定向到主页。我已经更新了答案。基本上，您需要处理凭据无效的场景。我在本地存储中获取此信息，并显示注销，因为这
{user:{token:null}}user:{token:null}token:null
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}}));
    });
};

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
}