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