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