当前演示的项目是通过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

    })

 }

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐