reactjs - reactjs axios拦截器如何调度注销操作
问题描述
在状态 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 反应代码
我看到了
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
};
所以我不知道该转向哪条路:(
解决问题
感谢 Bruno Paulino 的帮助,我用这段代码解决了这个问题
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())
});
解决方案
您可以在您可以直接访问 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'));
推荐阅读
- javafx - 将 TextField 绑定到 ListView 项
- julia - Julia中单次使用的快速矩阵向量乘法
- sympy - 使用 colaboratory 进行 Sympy 打印
- react-native - React Native Router Flux 不传递道具
- c# - C# - 如何使用引用创建 nuget 包
- excel - 用于比较值的 Excel 宏
- chilkat - 是否可以在线程中终止 SynchronousRequest?
- cocoapods - 使用 cocoapods 在测试目标中导入 Quick/Nimble 失败
- continuous-integration - 在 GitLab 完成的作业中查看变量的值
- ios - fastlane:在 Jenkins 管道中找不到命令