写在开头：项目中每次切换页面时都在全局的dva里面监听路由切换，调用一个checkToken方法，token失效就跳转登录页。但项目中的接口大部分都需要在请求头中带上登录后获取的token。思考：是不是可以取消checkToken这一步，直接在每个任意接口里判断token失效后跳转登录呢。搜索了下发现有拦截器这个东西，尝试封装一下调用方法，写的不对的请大佬指出！！！
1、创建一个request.js文件
import axios from 'axios'import {history } from 'umi'let BASE_URL = 'http://11.22.33/aaa';const createAxiosFn = (token, a, b) => {let headerParams = {"token": token,"A": a,"B": b}//请求头中可能有这三个参数的任意组合，有啥传啥let newParams = {}for (let key in headerParams) {if (headerParams[key]) {newParams[key] = headerParams[key]}}let service = axios.create({baseURL: BASE_URL,timeout: 5000,headers: {...newParams},});// 第二步，请求拦截service.interceptors.request.use(function (config) {// 请求发生前处理return config;}, function (error) {// 请求错误处理return Promise.reject(error);});// 第三步，响应阻拦service.interceptors.response.use(function (response) {// 响应数据处理if(response.data.status===10201){history.push('/login')}return response.data;}, function (error) {// 响应错误处理return Promise.reject(error);});return service}export default createAxiosFn
2、创建一个axiosFn.js
import createAxiosFn from './request.js';// getToken ()是用来获取当前项目中的token的import {getToken } from '../util/utils';import {message } from 'antd';export function apiGet(url, data,a,b) {return new Promise((resolve, reject) => {return createAxiosFn(getToken(),a,b).get(url, data).then((res) => {if (res.status === 200) {resolve(res.data);} else {reject(res.message);message.error(res.message);}}).catch((error) => {reject(error);});});}export function apiPost(url, data,a,b) {return new Promise((resolve, reject) => {return createAxiosFn(getToken(),a,b).post(url, data).then((res) => {if (res.status === 200) {resolve(res.data);} else {reject(res.message);message.error(res.message);}}).catch((error) => {reject(error);});});}
3、创建你的页面 Index.jsx
import React, {useEffect, useState } from 'react';import {apiGet} from '../../../sever/axiosFn';export default function Index(props) {const [project, setProject] = useState({});const queryData = () => {let url = '/aaaa/query';let params = {page: 1,size: 10,};apiGet(url, params).then((res) => {setProject(res);});};useEffect(() => {queryData() },[])return (<div>这是主页面</div>);}
效果：主页面的query接口传的token失效，会直接跳转login页面，并且弹出该接口的提示消息。
