如何解决使用redux的react js中的401错误。？答案

【问题标题】：How to resolve 401 error in react js using redux.?如何解决使用redux的react js中的401错误。？
【发布时间】：2021-03-20 14:25:56
【问题描述】：

我试图在 react js 中使用 redux 进行 api 调用，要求是在正文中发送电话号码，并在我正在执行的标头中发送访问令牌，但它一直给我错误 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>
)
}

【问题讨论】：

您是否尝试通过Postman 发布并查看回复？

标签： javascript reactjs api redux

【解决方案1】：

追加 Utsav 的回答，

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

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

【讨论】：

【解决方案2】：

你正在使用

const api = new Axios();

在下一行声明 Axios 但使用 axios。应该是哪个

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

【讨论】：

【解决方案3】：

你可以使用拦截器

axios.interceptors.request.use(function (req) {
    // Do something before request is sent
    
    auth = localStorage.getItem('auth') !== null ? localStorage.getItem('auth') : '';
    req.headers['Content-Type'] = 'application/json';
    req.headers['Authorization'] = 'Bearer '.concat(auth);
    req.url = 'http://www.sample.com/api/'.concat(req.url);
    return req ;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
});

【讨论】：