axios使用和源码阅读
axios.interceptorsaxios.interceptors拦截器主要用来作什么？和路由拦截有什么区别一个是接口的request， response数据处理一个是对业务处理，比如页面权限控制axios拦截import axios from ‘axios’import env from ‘@/env’import Utils from ‘@/components/Utils’import { Message} from ’element-ui’// 获取系统IDconst systemId = Utils.getQueryString(‘systemId’)if (systemId) { window.systemId = systemId} else { // 没有系统ID location.href = env.dataCloud}const auth = (response) => { // 未登录 if (response && ((response.status === 401) || (response.status === 412))) { location.href = env.dataCloud }}const instance = axios.create({ baseURL: ${env.api}${env.prefix.develop}, params: { systemId }, withCredentials: true})instance.nterceptors.response.use((response) => { auth(response) if (response && response.data && response.data.statusCode !== ‘0’) { Message.error((response.data && response.data.msg) || response.data.errmsg || ‘抱歉’) return Promise.reject(response).catch(() => { }) } return Promise.resolve(response.data)}, (error) => { let msg = ‘网络错误,请稍后再试’ if (error && error.response && error.response.status === 401) { msg = ‘请登录’ } const notice = document.getElementsByClassName(‘ivu-message-error’) if (notice.length === 0) { Message.error(msg) } auth(error && error.response) return Promise.reject(error).catch(() => { })})export default instance路由拦截login.jsmain.jsaxios/lib/core/Axios.jsaxios/lib/core/InterceptorManager.js拦截器上有request，response。分别用于拦截发送，接收。经典场景比如这样一个场景：在进行敏感操作(常见敏感操作如购买， 获取列表等)之前，每个请求需要携带token,但是token 有有效期，token 失效后需要换取新的token并继续请求。需求分析：每个请求都需要携带 token ，所以我们可以使用 axios request 拦截器，在这里，我们给每个请求都加 token,这样就可以节省每个请求再一次次的复制粘贴代码。token 失效问题，当我们token 失效，我们服务端会返回一个特定的错误表示，比如 token invalid，但是我们不能在每个请求之后去做刷新 token 的操作呀，所以这里我们就用 axios response 拦截器，我们统一处理所有请求成功之后响应过来的数据，然后对特殊数据进行处理，其他的正常分发。功能实现在 main.js 注册 axiosjsVue.use(Vuex)Vue.use(VueAxios, axios)Vue.use(qs)注：qs，使用axios，必须得安装 qs，所有的Post 请求，我们都需要 qs,对参数进行序列化。在 request 拦截器实现axios.interceptors.request.use( config => { config.baseURL = ‘/api/’ config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题 config.timeout = 6000 let token = sessionStorage.getItem(‘access_token’) let csrf = store.getters.csrf if (token) { config.headers = { ‘access-token’: token, ‘Content-Type’: ‘application/x-www-form-urlencoded’ } } if (config.url === ‘refresh’) { config.headers = { ‘refresh-token’: sessionStorage.getItem(‘refresh_token’), ‘Content-Type’: ‘application/x-www-form-urlencoded’ } } return config }, error => { return Promise.reject(error) })//在 response 拦截器实现axios.interceptors.response.use( response => { // 定时刷新access-token if (!response.data.value && response.data.data.message === ’token invalid’) { // 刷新token store.dispatch(‘refresh’).then(response => { sessionStorage.setItem(‘access_token’, response.data) }).catch(error => { throw new Error(’token刷新’ + error) }) } return response }, error => { return Promise.reject(error) })参考vue-axios interceptors(拦截器)实际应用一个项目学会前端实现登录拦截 ...