axios如何配置token和请求头

当前演示的项目是通过Cookies来保存的token,所以我们需要导入相关的依赖：

import axios from 'axios';

import Cookies from "js-cookie";

定义一个默认的请求路径，默认的请求路径是通过项目开发环境来决定，我们可以通过node.js中process.env.NODE_ENV来判断所处项目是处于什么开发环境，process.env.NODE_ENV == "production" 说明当前是生产环境，否则就是开发环境。

let baseUrl = " ";

if (process.env.NODE_ENV == "production") {

    baseUrl = '/gxdms';

} else {

    baseUrl = 'http://116.1.213.78:8093/gxdms';

}

创建axios实例：

const service = axios.create({

         // axios中请求配置有baseURL选项，表示请求URL公共部分

         baseURL: baseUrl,

         // 超时

         timeout: 100 * 1000,

}） 

我们项目是后台管理系统，所以我们需要定义哪些地址是不带token也是可以发送请求的： 

// 不需要携带token的请求地址  也可以在数组中定义多个，但是我们项目只有 /login可以直接访问的。

let whiteList = [

     '/login'

 ]

//告警URL  可以定义其他url

service.alarmUrl = 'http://180.129.154.235:10008/';

判断当前请求的地址是否需要携带token：

 service.interceptors.request.use(config => {

     // 是否需要设置 token

     const isToken = whiteList.indexOf(config.url) == -1 ? true : false;

     if (Cookies.get("token") && isToken) {

     config.headers['Authorization'] = Cookies.get("token"); // 让每个请求携带自定义token 请        根据实际情况自行修改

  }

    return config;

  }, error => {

    return Promise.reject(error)

 })

// response interceptor

service.interceptors.response.use((response) => {

     return response.data;

}, error => {

    return Promise.reject(error)

})

export default service    //导出service  实例   当前文件名可以命名为request.js

使用如下：

先导入

import request from '@/utils/request.js';

// 新增用户信息

export function addUserInfo(data){

    return request({

        url: '/system/user/add',

        method: 'post',

        data: data

    })

 }