zoukankan      html  css  js  c++  java
  • axios拦截器

    vue一般都搭配axios这个工具来做http请求,有时我们需要配置一些全局参数,比如token啦,设置超时时间啦,未登录状态踢出啦等等。
    这些参数的设置,当然不可能一个一个请求加了,否则累的吐血也不一定能达到目的,最好的办法就是通过拦截器让每个请求都可以加上配置参数。

    import axios from 'axios'
    axios.defaults.timeout = 10000 // 超时时间
    let VueCookie = require('vue-cookie')
    let cookieVue = VueCookie.get('x_auth_token') // 获取cookie
    axios.interceptors.request.use(
      config => {
        config.headers['X-Auth-Token'] = cookieVue //cookie设置在头部信息里面
        config.headers['Content-Type'] = 'application/json' 
        return config
      },
      error => {
        alert('请求超时,请稍后重试!')
        return Promise.reject(error)
      }
    )
    // http响应拦截器
    axios.interceptors.response.use(res => {
      if (res.data.bodyObj && res.data.bodyObj.code) {
        let code = res.data.bodyObj.code
        // 10101是未登录状态码
        if (code === 10101) { // 如果是未登录直接踢出去
          location.href = '/login.html'
        }
      }
      return res
    },
    error => {
      alert('请求失败,请稍后重试!')
      return Promise.reject(error)
    }
    )
    
    export default axios
    项目中通常使用token进行用户权限认证,需要在请求的header中添加token信息进行验证,拦截返回的状态码进行跳转或重新登陆,在全局配置这些不妥,所以新建一个axios实例进行项目的配置。
    // util.js
    import axios from 'axios'
    import cookies from 'vue-cookies'
    import router from 'vue-router'
    export const $axios = axios.create({ // 这里是配置项
      timeout: 7000,
    })
    
    // 拦截请求
    $axios.interceptors.request.use(
      config => {
        console.log(config);
        let t = cookies.get('t')
        if (t) {
          config.headers.t = t
        } else {
          router.replace({path: '/login'})
        }
        return config
      },
      err => {
        return Promise.reject(err)
      }
    )
    
    // 拦截响应
    $axios.interceptors.response.use(
      response => {
        console.log(response)
        return response
      },
      err => {
        console.log(err);
        if (err.response) {
          switch (err.response.status) {
            case 401:
              // 这里写清除token的代码
              router.replace({
                path: 'login',
                query: {redirect: router.currentRoute.fullPath} // 登录成功后跳入浏览的当前页面
              })
          }
        }
        return Promise.reject(err)
      }
    )
    ————————————————
    
    原文链接:https://blog.csdn.net/qq_39081974/article/details/81940300

     转载https://www.jianshu.com/p/e11e6df9681b

  • 相关阅读:
    java wait 与 notify sleep
    java线程安全总结
    ubuntu安装遇到的问题
    python时间处理函数
    js获取当前时间
    sql如何将同个字段不同值打印在一行
    django models数据类型
    django上传图片和文字记录
    django form使用学习记录
    django中request对象详解(转载)
  • 原文地址:https://www.cnblogs.com/gopark/p/11530857.html
Copyright © 2011-2022 走看看