前提：
请求拦截器和响应拦截器主要应用场景：请求网络接口
- 请求拦截器：发送请求的时候，携带一些信息
- 响应拦截器：接收到数据的时候，进行数据过滤、对状态码判断，进行对应的操作
Vue的网络请求可以在main.js里面进行封装配置
import axios from 'axios'
// 为axios配置请求的根路径
axios.defaults.baseURL = 'http://43.142.35.140:8890/api/private/v1/'
// 设置拦截器
axios.interceptors.request.use(config => {
// 为请求头对象,添加Token验证的Authorization字段,才可以调用有权限的API
config.headers.Authorization = window.sessionStorage.getItem('token')
// 在最后必须return config
return config
})
// 把axios包挂载到vue的原型对象上
Vue.prototype.$http = axios
一、请求拦截器
- 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
代码实现（Vue）
// 请求超时时间
axios.defaults.timeout = 120000
// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
// 判断是否存在token，如果存在将每个页面header都添加token
if (window.sessionStorage.getItem('DT')) {
// 请求头配置全局token
config.headers.DT = window.sessionStorage.getItem('DT')
}
return config
},
err => {
// 对请求错误做些什么
Vue.prototype.$message.error('请求超时')
return Promise.reject(err)
}
)
二、响应拦截器
- 响应拦截器的作用是在接收到响应后进行一些操作
- 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
- 对接收到的数据进行处理筛选，只留下需要的数据
- 响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器。
代码实现（Vue）
// 响应拦截器
axios.interceptors.response.use(
response => {
// res是响应的结果
switch (response.data.code) {
case 401:
// 登录失效
// 响应成功的拦截
console.log('响应拦截器：')
// console.log(response.data)
Vue.prototype.$message.error(response.data.message)
sessionStorage.removeItem('DT')
router.push('/login')
break
case 404:
if (response.data.message !== null) {
Vue.prototype.$message.error(response.data.message)
} else {
Vue.prototype.$message.error('未知错误')
}
break
case 500:
// 错误
if (response.data.message !== null) {
Vue.prototype.$message.error(response.data.message)
} else {
Vue.prototype.$message.error('未知错误')
}
break
default:
return response
}
return response
},
err => {
if (err.response.data.message) {
Vue.prototype.$message.error(err.response.data.message)
return Promise.reject(err.response.data.message) // 返回接口返回的错误信息
} else {
// 返回状态码不为200时候的错误处理
Vue.prototype.$message.error(err.toString())
return Promise.resolve(err)
}
}
)
三、页面中请求接口时
// 用户登录提交
login() {
// debugger
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return
if (valid) {const userInfo = {
username: this.loginForm.username,
password: this.loginForm.password
}
// 登录之前去除token
window.sessionStorage.removeItem('DT')
const { data: res } = await this.$http.post('/system/login', userInfo)
if (res.code !== 200) {
this.initCaptcha()
return
}
this.$message.success('登录成功')
window.sessionStorage.setItem('DT', res.result.token)
this.$router.push('/main')
}
})
}
