axios拦截http拦截

一，判断登录页面

const routes = [
    {
        path: '/',
        name: '/',
        component: Index
    },
    {
        path: '/repository',
        name: 'repository',
        meta: {
            requireAuth: true,  // 添加该字段，表示进入这个路由是需要登录的
        },
        component: Repository
    },
    {
        path: '/login',
        name: 'login',
        component: Login
    }
];

二，监听路由

router.beforeEach((to, from, next) => {
    if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        if (store.state.token) {  // 通过vuex state获取当前的token是否存在
            next();
        }
        else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}  // 将跳转的路由path作为参数，登录成功后跳转到该路由
            })
        }
    }
    else {
        next();
    }
})

三，拦截器

// http request 拦截器
axios.interceptors.request.use(
　　　　//在请求之前做点什么 比如加入token
    config => {
        if (store.state.token) {  // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers.Authorization = `token ${store.state.token}`;
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    });
 
// http response 拦截器
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}
                    })
            }
        }
        return Promise.reject(error.response.data)   // 返回接口返回的错误信息
    });

四，http拦截

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message组件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超时时间
axios.defaults.timeout = 5000
// http请求拦截器
var loadinginstace
axios.interceptors.request.use(config => {
 // element ui Loading方法
 loadinginstace = Loading.service({ fullscreen: true })
 return config
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载超时'
 })
 return Promise.reject(error)
})
// http响应拦截器
axios.interceptors.response.use(data => {// 响应成功关闭loading
 loadinginstace.close()
 return data
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加载失败'
 })
 return Promise.reject(error)
})
 
export default axios

统一处理了http请求和响应的拦截.当然我们可以根据具体的业务要求更改拦截中的处理.

//请求拦截器 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么，例如加入tokenreturn config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

//响应拦截器 响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
axios.interceptors.response.use(function (response) {
    // 在接收响应做些什么，例如跳转到登录页
    ......
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

//移除拦截器 
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

//为axios添加实例拦截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

 

自己项目中的请求拦截

import Axios from 'axios'
import { router } from '../router'
import { baseURL } from '../config/config'
import { getStorage } from '../assets/storage/index'

function plugin (Vue) {
  if (plugin.installed) {
    return
  }
  Axios.defaults.baseURL = baseURL()
  Axios.defaults.timeout = 5000 * 2
  // Axios.create({
  //   baseURL: 'http://',
  //   timeout: 5000 * 2
  //   // withCredentials: true//不通过请求头传递 携带cookie发送
  // })
  // 请求拦截
  Axios.interceptors.request.use(config => {
    if (config.method === 'post') {
      config.data = JSON.stringify(config.data)
    }
    // 设置请求头
    config.headers['Content-type'] = 'application/json'
    let token = getStorage('TokenKey')
    if (token) {
      config.headers['Authorization'] = 'bearer ' + token
    }
    return config
  }, (err) => {
    return Promise.reject(err)
  })
  // 请求结束
  Axios.interceptors.response.use((res) => {
    if (res.status === 200) {
      return res.data
    }
  }, (err) => {
    if (err.response) {
      if (err.response.status === 401) {
        router.replace('/lancher')
          .then(() => {
            Vue.toast.hide()
            Vue.alert.hide()
          })
      }
    }
    return Promise.reject(err)
  })

  Vue.req = (() => {
    return Axios
  }).call(this)

  Object.defineProperties(Vue.prototype, {
    $req: {
      get () {
        return Axios
      }
    }
  })
}

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(plugin)
}

export default plugin