Vue学习笔记：拦截器

原文地址

Vue可以对http request和http response添加全局拦截，最典型的例子就是在请求头里添加token，和监测是否登录，如果没有登录则跳转到登录页面。

main.js中添加拦截器的代码：

1. request 拦截器

//request 拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('token')) {
      config.headers.Authorization = localStorage.getItem('token');
    }
 
    return config;
  },
  error => {
    return Promise.reject(error);
  });

2. response 拦截器

//response 拦截器
axios.interceptors.response.use(
  response => {
      return response;
  },
  error => {
    if (error.response) {
        switch (error.response.status) {
            case 401:
                // 返回 401 清除token信息并跳转到登录页面
                router.replace({
                    path: '/admin/login'
                })
        }
    }
    return Promise.reject(error.response.data)   // 返回接口返回的错误信息
});