javascript - 如何使用 redux 解决 react js 中的 401 错误？

Question

我正在尝试在 react js 中使用 redux 进行 api 调用，要求在正文中发送电话号码并在 header 中发送访问 token ，我正在这样做，但它一直给我错误 401，这是未经授权的访问。 API 调用的主体需要原始数据，我不确定这是否是我做错的地方。

Action .js

export const verifyPhoneNumber = (userdata) => {
  return async (dispatch) => {
    dispatch(fullScreenLoader(true));
    const api = new Axios();
    const response = axios.post(
      "https://theappsouk.com/api/Profile/SendVerificationSmsCode",
      {
        phone_number: userdata.pnumber,
      },
      {
        Authorization: `Bearer ${userdata.auth}`,
      }
    );
    console.log(JSON.stringify(data))
    const { data } = response;
    dispatch(fullScreenLoader(false));
    dispatch({
      type: VERIFY_PHONE_NUMBER,
      payload: data,
    });
    if (data.status) {
      dispatch({
        type: REGISTER_USER,
        payload: data,
      });
    }
  };
};

reducer.js

case VERIFY_PHONE_NUMBER:
      return {
        ...state,
        verifyPhoneNumber: action.payload,
      };

我的组件

export default class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      number: "",
      address: "",
      error: "",
      selectedCode: "DK",
    };
  }
submitPhoneNumber = () => {
    if (this.state.number.length < 1) {
      this.setState({ error: "Phone Number is Required" });
      return;
    }
    const { number } = this.state;
    let pnumber = `${this.props.user.data.user.country_code}${number}`;
    console.log(pnumber)
    const auth = this.props.user.data.user.access_token;
    this.props.verifyPhoneNumber({
      pnumber,
      auth,
    });
  };
return (
 <form className="form bg-white p-3 mb-3">
            <div className="row">
              <div className="col-4 mr-0">
                <label>
                  <IntlMessages id="profile.emailbox.field.code" />
                </label>
                <select className="custom-select" id="inputGroupSelect01">
                  <option>{this.props.user.data.user.country_code}</option>
                </select>
              </div>
              <div className="col-8 ml-0 pl-0">
                <TextInputComponent
                  label={
                    <IntlMessages id="profile.emailbox.field.mobilenumber" />
                  }
                  type="text"
                  placeholder="Mobilnummer"
                  value={this.state.number}
                  onChange={(e) => {
                    this.handleChange(e, "number");
                  }}
                />
              </div>
            </div>
            <small className="text-danger my-0 py-0">{this.state.error}</small>
            <div className="form-group">
              <div className="divider"></div>
            </div>
            <div className="form-group mb-0 text-right">
              <button
                className="btn btn-default"
                type="button"
                onClick={this.submitPhoneNumber}
              >
                {<IntlMessages id="profile.button.update" />}
              </button>
            </div>
          </form>
)
}

Answer 1

附上 Utsav 的回答，

axios帖子的授权部分必须是这样的。

const response = api.post(
  "https://theappsouk.com/api/Profile/SendVerificationSmsCode",
  {
    phone_number: userdata.pnumber,
  },
  {
    headers: { Authorization: `Bearer ${userdata.auth}` }    
  }
);