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 => {
        // 错误处理
    })

原文地址:http://www.cnblogs.com/mahmud/p/16862677.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性