reactjs axios 拦截器如何调度注销操作

IT技术 reactjs axios
2021-05-23 13:03:19

如何在状态 401/403 的情况下调度注销操作

用这个代码

import axios from "axios";
import { Storage } from "./utils/storage";
const instance = axios.create({
  baseURL: process.env.API_URL,
  timeout: 3000
});

const onRequestSuccess = config => {
  console.log("request success", config);
  const token = Storage.local.get("auth");
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
};
const onRequestFail = error => {
  console.log("request error", error);
  return Promise.reject(error);
};
instance.interceptors.request.use(onRequestSuccess, onRequestFail);

const onResponseSuccess = response => {
  console.log("response success", response);
  return response;
};
const onResponseFail = error => {
  console.log("response error", error);
  const status = error.status || error.response.status;
  if (status === 403 || status === 401) {
    //dispatch action logout
  }
  return Promise.reject(error);
};
instance.interceptors.response.use(onResponseSuccess, onResponseFail);

export default instance;

更新

我偷看了 jhipster react代码

我看到了

const actions = bindActionCreators({ logOut }, store.dispatch);
setupAxiosInterceptors(() => actions.logOut());

但我想使用这样的实例

import axios from "../../../axios";
import API_URLS from "../../../constants/api";

const accountUrl = API_URLS.account;

const account = data => {
  return axios.post(accountUrl, data).then(response => {
    return response.data;
  });
};

export const Provider = {
  account
};

所以我不知道该往哪个方向转:(

解决这个问题

感谢布鲁诺保利诺的帮助，我用这段代码解决了这个问题

import axios from "./axios";
import { Storage } from "./utils/storage";

const setupAxiosInterceptors = onUnauthenticated => {
  const onRequestSuccess = config => {
    console.log("request success", config);
    const token = Storage.local.get("auth");
    if (token) {
      config.headers.Authorization = `${token.token}`;
    }
    return config;
  };
  const onRequestFail = error => {
    console.log("request error", error);
    return Promise.reject(error);
  };
  axios.interceptors.request.use(onRequestSuccess, onRequestFail);

  const onResponseSuccess = response => {
    console.log("response success", response);
    return response;
  };
  const onResponseFail = error => {
    console.log("response error", error);
    const status = error.status || error.response.status;
    if (status === 403 || status === 401) {
      onUnauthenticated();
    }
    return Promise.reject(error);
  };
  axios.interceptors.response.use(onResponseSuccess, onResponseFail);
};
export default setupAxiosInterceptors;


const {dispatch} = store;
setupAxiosInterceptors(()=>{
  dispatch(authLogout())
});
3个回答

您可以在可以直接访问 redux 存储的同一位置包含此拦截器代码。也许在您创建 redux 存储 (index.js) 的文件中？

有了它，您就可以直接从 redux 存储中分派动作，如下所示：

import reduxStore from './store';

import App from './components/App';

const router = (
  <Provider store={reduxStore}>
    <Router>
      <Route path="/" component={App}/>
    </Router>
  </Provider>
);

/** Intercept any unauthorized request.
* dispatch logout action accordingly **/
const UNAUTHORIZED = 401;
const {dispatch} = reduxStore; // direct access to redux store.
axios.interceptors.response.use(
  response => response,
  error => {
    const {status} = error.response;
    if (status === UNAUTHORIZED) {
      dispatch(userSignOut());
    }
   return Promise.reject(error);
 }
);

render(router, document.getElementById('app-root'));

我和你有同样的问题，这是我的解决方案：

  1. 定义 axios 拦截器并调用 redux 存储。
import Axios from 'axios';

const interceptor = (store) => {
    Axios.interceptors.request.use(
        (conf) => {
            if(!conf.headers['Authorization']){
                
            }
            console.log(store);
            debugger;
            // you can add some information before send it.
            // conf.headers['Auth'] = 'some token'
            return conf;
        },
        (error) => {
            debugger;
            return Promise.reject(error);
        }
    );
    Axios.interceptors.response.use(
        (next) => {
            debugger;
            return Promise.resolve(next);
        },
        (error) => {
            // You can handle error here and trigger warning message without get in the code inside
            
            debugger;
            return Promise.reject(error);
        }
    );
};
const store = createStore(reducer, enhancer);
interceptor(store);
  1. 将 redux 存储配置到您的项目中。
  2. 调用 axios 请求：
function getAllCompany(userObject) {

    let headers = { 'Authorization': 'Bearer ' + userObject.accessToken }

    return axios({
        method: 'post',
        url: rootURL + "/getallcompany",
        data: { },
        headers: headers
    }).then(handleResponse).catch(handleError);
}

我有同样的问题。我想说解决这个问题的关键是在我导出 axios 实例的文件之外添加一个拦截器。

其它你可能感兴趣的问题
上一篇无需打印即可在家中构建水平热端支架的最简单方法 下一篇除了聚合物，还有哪些材料可用于 DLP 打印？