首页 > 其他分享 >axios请求拦在器添加token(请求头添加token)保证有权访问请求数据~~

axios请求拦在器添加token(请求头添加token)保证有权访问请求数据~~

时间:2022-11-06 15:34:36浏览次数:39  
标签:axios 请求 err 拦截器 token 添加 拦在器

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

标签:axios,请求,err,拦截器,token,添加,拦在器
From: https://www.cnblogs.com/mahmud/p/16862677.html

相关文章