axios请求拦在器添加token
开发项目中有很多个请求接口,除了login以外其他的请求接口有了访问权限才能正常请求数据访问页面。
需要授权的API必须每一次的请求携带token,就是请求头添加token,后端根据token来判断该请求有没有授权。
那么必须在请求头中使用Authorization字段提供token令牌!--提供axios请求拦在器添加token
先把config打印出来看看,有没有Authorization字段
使用Ayuthozation给请求头添加token令牌
是因为目前登录组件是login,所有后台没给返回token令牌,结果也是null,如果是其他接口的话不会是null,分摊返回token令牌
拦截器介绍
一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器、响应拦截器。
请求拦截器
在请求发送之前进行必要操作处理,例如添加统一cookie、请求体加验证、设置请求头等,相当于是对每个接口里相同操作的一个封装。
响应拦截器
响应拦截器在响应数据之前进行必要的操作,只是在请求得到响应之后,对响应体的一些处理,通常用来对数据的处理、判断登陆失效等。
Axios实例
// 引入axios
import axios from 'axios'
// baseURL设置
let baseURL = 'xxxxxxxxxxx'
// 创建实例
let http1 = axios.create({
baseURL,
timeout: 2000 // 毫秒
})
配置拦在器
// 请求拦截器
实例1.interceptors.request.use(config => {}, err => {})
// 响应拦截器
实例1.interceptors.respone.use(respone => {}, err => {})
- 1.请求拦在器
// use(两个参数)
axios.interceptors.request.use(config => {
// 在发送请求前做一些事
....
return config
}, err => {
// 在请求错误时做的事儿
return Promise.reject(err)
})
- 2.相应拦在器
// use(两个参数)
axios.interceptors.respone.use(respone => {
// 请求成功对响应数据做处理
....
// 该返回的数据则是axios().then(res)中接受的数据
return respone
}, err => {
// 在请求错误时做的事儿
// 该返回的数据则是axios.catch(err)中接收的数据
return Promise.reject(err)
})
- 常见错误码处理(error)
- axios请求错误时,可在catch里进行错误处理。
axios.get().then().catch(err => { // 错误处理 })