vue项目接口地址暴露_Vue.js 项目接口管理

在vue开发中，会涉及到很多接口的处理，当项目足够大时，就需要定义规范统一的接口，如何定义呢？

本文使用vue-cli生成的项目举例。

第一步.在src目录下新建一个文件夹http，在http目录下建文件夹moudules，后台提供的所有接口都在这里定义.

第二步.在moudules目录下划分模块新建js文件,比如：

a.会员中心模块： member.js

b.登录注册模块: login.js

c.合伙人模块： partner.js

目录大概是这个样子：

第三步，需要引入axios做相应的配置。

1.首先安装axios

npm install axios

2.在http目录下新建axios.js:

/* jshint esversion: 6 */

import axios from 'axios';

import Cookies from "js-cookie";

import config from './config';

import router from '@/router';

import { Toast} from 'vant';

export default function $axios(options) {

return new Promise((resolve, reject) => {

const instance = axios.create({

baseURL: config.baseUrl,

headers: config.headers,

timeout: config.timeout,

withCredentials: config.withCredentials,

});

// request 拦截器

instance.interceptors.request.use(

config => {

//在发送之前做点什么

let auth_token = Cookies.get('auth_token');

if (auth_token) {

config.headers.auth_token = auth_token;

} else {

let loginpage = Cookies.get('loginpage');

if (loginpage) {

router.push('/login');

}</