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

Question

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

im getting this error if the credentials are not correct, its working fine if the login details are correct, also i want to show if the email or password is wrong i want to get the API server response message and show the response message below login button. someone pls help me

// 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" />;
  }

Answer 1

You can handle error in catch block by chaining catch() after then()

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

Answer 2

You can set a default user object in localStorage and then check if it is not null or undefined.

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

Answer 3

The reason you are getting that error because response.data.data property is undefined and it is happening when credentials are invalid. You should see what is server returning and based on that handle the response and show relevant message to the user.

What you can do is make your if condition more strict by adding a and condition to it. like, by doing so, user will only be set in localStorage when the token property is received from the server:

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
}

and also add a catch block to handle server errors.