五、axios拦截器

一、遇到的问题

 如图

 

 如图

 

 这个值就是拿不到

代码如下：

/**
 * Created by superman on 17/2/16.
 * http配置
 */
import { Toast } from 'vant';
import axios from 'axios'
import store from '../vuex/store'
//import * as types from '../vuex/types'
//import router from '../router/index'  //

// axios 配置
// 请求超时时间10秒
axios.defaults.timeout = 10000
//axios.defaults.baseURL = 'https://api.github.com'
// 请求根路径
axios.defaults.baseURL = 'http://localhost:65194/api'



// 请求拦截器
axios.interceptors.request.use(
  config => {
    if (store.state.accessToken) {
      config.headers.Authorization = `Bearer ${store.state.accessToken}`
    }
    return config
  },
  error => {
    return Promise.reject(error)
  },
)

// 响应拦截器
axios.interceptors.response.use(
  response => {
    console.warn(response);
    if (response.status === 200) {
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  //服务器状态码不是200的情况    
  error => {
    console.warn(error.response);
    // 对响应错误做点什么
    if (error.response) {
      switch (error.response.status) {
        // 401: 未登录                
        // 未登录则跳转登录页面，并携带当前页面的路径                
        // 在登录成功后返回当前页面，这一步需要在登录页操作。
        case 401:
          console.log("未授权");
          /*router.replace({
            path: '/login',
            query: { redirect: router.currentRoute.fullPath }
          });*/
          /*
           Toast({                        
                        message: '登录过期，请重新登录',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                    // 清除token                    
                    localStorage.removeItem('token');                    
                    store.commit('loginSuccess', null);                    
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                 
           */
          break;
        case 403:
          console.log("禁止访问");
          break;
        case 404:
          Toast({
            message: '网络请求不存在',
            duration: 1500,
            forbidClick: true
          });
          break;
        // 其他错误，直接抛出错误提示                
        default:
          Toast({
            message: error.response.data.message,
            duration: 1500,
            forbidClick: true
          });
      }
    }
    return Promise.reject(error.response.data)
  },
)

export default axios

或种写法还是不行

/**
 * Created by superman on 17/2/16.
 * http配置
 */
//import {Toast} from 'vant';
import axios from 'axios'
import store from '../vuex/store'
//import * as types from '../vuex/types'
//import router from '../router/index'  //

// axios 配置

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://localhost:65194/api',// api 的 base_url
  timeout: 10000,     // request timeout  设置请求超时时间
  withCredentials: true, // 是否允许带cookie这些
})

// 请求拦截器
instance.interceptors.request.use(config => {
  if (store.state.accessToken) {
    config.headers.Authorization = `Bearer ${store.state.accessToken}`
  }
  return config;
}, error => {  //请求错误处理
  return Promise.reject(error)
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 接下来会在这里进行token过期的逻辑处理
  console.warn("response heders:",JSON.parse(JSON.stringify(response.headers)));
  return response
}, error => {
  console.warn("错误响应请求:");
  console.warn(error);
  return Promise.reject(error)
})

export default instance

如图：

二、解决问题

1、分析

我用一个简单的axios调用别的接口，可以获取的，排查问题点在接口端，我后台设置了支持跨域呀

 注意后台的跨域，准备应用前端跨域

2、实现跨域设置 vue cli4.2.2 版本

2、1创建代理文件

 2、2添加代理配置

如图所示：

代码如下：

module.exports = {
    devServer: {
        //host: "localhost",
        //port: 65194,//端口号  //前端访问的端口号
        https: false,
        open: false,//配置自动启动浏览器
        //proxy:'http://localhost:4000' //配置跨域处理，只有一个代理
        //配置多个代理
        proxy: {
            '/api': {
                target: 'http://localhost:65194',
                changeOrigin: true,//是否跨域
                pathRewrite: {
                    '^/api': '', // 这种接口配置出来实际请求接口 http://localhost:65194/api/login,<br>　
                }
            }
        }

    }
}

注意：配置后需要重启服务。

2、3配置axios的baseUrl

如图所示：

 代码如下：

axios.defaults.baseURL = '/api/'  // api 即上面 vue.config.js 中配置的地址

2、4接口请求

 原理：

        /*
           1、'/api'模糊匹配代理的地址
           2、axios.defaults.baseURL = '/api' 则是匹配到proxy内的'/api'然后替换使用target属性的网址 http://localhost:65194
           因为开启代理是http://localhost:65194,但是在配置$.axios中设置了axios.defaults.baseURL = '/api'
           然后在$.axios请求的 url: "/api/Home/Login"中有api,
           注意：此时请求的网址是http://localhost:65194/api/api/home/login
           所以pathRewrite替换掉一个
        */

参考：