vue cli+axios 拦截器使用

当我们访问某个地址页面时，有时会要求我们重新登录后再访问该页面，也就是身份认证失效了，如token丢失了，或者是token依然存在本地，但是却失效了，所以单单判断本地有没有token值不能解决问题。此时请求时服务器返回的是401错误，授权出错，也就是没有权利访问该页面。 
我们可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

1.新建axios.js文件

import axios from 'axios'//

// http request 请求拦截器，有token值则配置上token值
axios.interceptors.request.use(
    config => {
        if (token) {  // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
            config.headers.Authorization = token;
        }
        return config;
    },
    err => {

        return Promise.reject(err);//请求错误时，直接结束

        //return Promise.resolve(err);//请求错误时，不会直接结束，将会继续传到then里面,无论请求成功还是失败，在成功的回调中都能收到通知

    });


// http response 服务器响应拦截器，这里拦截401错误，并重新跳入登页重新获取token
axios.interceptors.response.use(
    response => {
        return response;
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 400: err.message = '请求错误(400)' ; break;
                case 401:
                    // 这里写清除token的代码
                    err.message = '未授权，请重新登录(401)';
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}//登录成功后跳入浏览的当前页面

                    })

                    break;
                case 403: err.message = '拒绝访问(403)'; break;
                case 404: err.message = `请求出错(404)`; break;
                case 408: err.message = '请求超时(408)'; break;
                case 500: err.message = '服务器错误(500)'; break;
                case 501: err.message = '服务未实现(501)'; break;
                case 502: err.message = '网络错误(502)'; break;
                case 503: err.message = '服务不可用(503)'; break;
                case 504: err.message = '网络超时(504)'; break;
                case 505: err.message = 'HTTP版本不受支持(505)'; break;
                default: err.message = `连接出错(${err.response.status})!`;

            }
        }

        return Promise.reject(error.response.data) /请求错误时，直接结束

        //return Promise.resolve(error);//请求错误时，不会直接结束，将会继续传到then里面,无论请求成功还是失败，在成功的回调中都能收到通知

    });

export default axios

2.在main.js入口文件，或者是调用接口请求方法的文件中，引入axios.js文件

import axios from './axios';//引入axios.js文件
axios.defaults.baseURL =reqUrl.baseUrl;//接口地址域名+端口号
axios.defaults.timeout =2500;

axios.defaults.responseType = 'json';

axios.post(reqUrl.login,exted(data)).then(res => {
    cb && cb(res.data)
  }).catch(err =>{
  console.log(err);
  })