axios请求拦截器解析

axios请求拦截器

访问某个地址页面时，会被要求重新登录后在访问，身份认证失效了

token问题：

1：token丢失

2：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响应拦截器 拦截401错误，重新获取token

// 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

使用：

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

//引入axios.js文件
import axios from './axios';
//接口地址域名+端口号
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);
  })