• 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

  • 相关阅读:
    [原]实例-简单设计&精简代码&复用代码
    [原创]实例-少用单例及降低耦合
    c#实现数据集合转换为csv文本
    [转]SqlServer索引的原理与应用
    [转]AngularJS:何时应该使用Directive、Controller、Service?
    [转]AngularJS移动开发中的坑汇总
    [转]Hibernate对象的三种状态
    [转]AngularJS Cookies Example
    [转]LESS CSS 框架简介
    [转]为ReportViewer导出的PDF文档加上水印
  • 原文地址:https://www.cnblogs.com/gopark/p/11530857.html
Copyright © 2020-2023  润新知