• axios请求拦在器添加token(请求头添加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 => {
          // 错误处理
      })
  • 相关阅读:
    android 项目
    input keyevent 数字对应的操作
    logcat 使用方法
    android查看内存使用情况
    图片点击放大效果
    禁止img图片拖动在新窗口打开
    人工智能
    游戏开发
    随手做的一个模拟弹出窗口
    Html的<meta>标签使用方法及用例
  • 原文地址:https://www.cnblogs.com/mahmud/p/16862677.html
Copyright © 2020-2023  润新知