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

Posted 2023-02-22

【中文标题】如何解决使用redux的react js中的401错误。？

【英文标题】：How to resolve 401 error in react js using redux.?

【发布时间】：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 发布并查看回复？

【参考方案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);
);