zoukankan      html  css  js  c++  java
  • 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)
      }
    )

    使用

    import Vue from 'vue'
    import {$axios} from './assets/lib/util'
    
    Vue.prototype.$http = $axios
  • 相关阅读:
    Programming Contest Ranking(题解)
    Alphabet Cookies
    hpu 1267 Cafeteria (01背包)
    Triangles 正多边形分割锐角三角形
    ACdream 1067:Triangles
    hdu 1253 胜利大逃亡 (代码详解)解题报告
    最短路
    POJ- 1511 Invitation Cards
    E
    HDU
  • 原文地址:https://www.cnblogs.com/xtjatswc/p/10329816.html
Copyright © 2011-2022 走看看