vue拦截器及请求封装

1.vue项目的src文件夹中创建request文件夹
（1）request文件夹中创建index.js (拦截器主要代码)

/*** 请求封装*/import axios from 'axios';import configUrl from './url.js';
//  import store from '../store';import cookies from "vue-cookies";import router from "../router/index"const service = axios.create({baseURL: configUrl.baseURL,// withCredentials: true, // 当跨域请求时发送cookietimeout: 50000 // 请求超时});//添加请求拦截器   请求接口统一添加tokenservice.interceptors.request.use(config =>{config.headers['PC-LOGIN-SESSION-ID'] = cookies.get('supplier_token')||''//  config.headers.PC-LOGIN-SESSION-ID = cookies.get('gys_token');  //请求添加tokenreturn config;},error =>{return Promise.reject(error);})// 响应拦截器service.interceptors.response.use(response => {//如果接口返回token，替换本地旧tokenif (response.headers.token) {sessionStorage.setItem("token", response.headers.token);}console.log('拦截器响应',response)//自定义设置后台返回code对应的响应方式if (response.data.code == 0) { // 请求成功return response.data;} else if(response.data.code == 100){ //token过期router.app.$router.push({ path: '/login' })return response.data;// router.app.$router.replace('/login')//  return Promise.reject(new Error('登录超时'));// console.log(router)}else{return response.data;}// return response.data;},error => {if (error.message) {// this.$massage.error('服务器开小差了，请稍后再试!')   //错误响应alert('服务器开小差了，请稍后再试!')   }return Promise.reject(error);});//暴露出封装过的服务export default service;

（2）request文件夹下创建url.js文件（域名地址的配置，按照不同环境请求域名不同）

const VUE_APP_MODE = process.env.VUE_APP_MODE;
let baseURL;
if (VUE_APP_MODE == 'development') { // 本地baseURL = 'http://127.0.0.1:8888';//测试地址
} else {// pre 预生产// prod 生产switch (VUE_APP_MODE) {case 'test':// 测试baseURL = 'http://test.com/api';break;case 'pre':// 预生产baseURL = 'http://pre.com';break;case 'prod':// 生产baseURL = 'http://prod.com';break;default:// 测试baseURL = 'http://develop.api.center.tuanhaocai.com';// baseURL = 'http://192.168.2.207:8088';//本地break;}
}
module.exports = {baseURL
};

（3）request文件夹下创建api.js文件

//引入上边封装的axios文件
import request from "@/request";
import qs from "qs";  // 用户获取验证码
export const getCode = data => {return request({url: "/common/sms/send?"+qs.stringify(data),method: "GET",headers:{"content-type": "application/json;charset=UTF-8"},});
};
// 用户退出登录
export const loginOut = data => {return request({url: "/supplier/user/logout?"+qs.stringify(data),method: "GET",headers:{"content-type": "application/json;charset=UTF-8"},});
};
//用户修改密码  post请求
export const update_password = data => {return request({url: "/supplier/user/updatePassword",method: "POST",headers:{"content-type": "application/json;charset=UTF-8"},data});
};//用户登录（密码登录）  post请求
export const login_rq = data => {return request({url: "/supplier/user/loginForPas",method: "POST",headers:{"content-type": "application/json;charset=UTF-8"},data});
};
//用户登录（验证码登录）  post请求
export const login_code = data => {return request({url: "/supplier/user/loginForCode",method: "POST",headers:{"content-type": "application/json;charset=UTF-8"},data});
};//下载用户上传模板   get请求
export const downLoadTemplate = params=> {return request({url: "/user/info/template",method: "GET",headers:{"content-type": "application/json;charset=UTF-8"},params});
};

（4）补充说明启动环境问题（request文件夹下创建url.js文件如何配置启动环境不同域名不同问题）
在配置文件package.json中配置启动命令（可以自己随意起名）

  "scripts": {"serve": "vue-cli-service serve --open","dev": "vue-cli-service serve --open --mode dev","test": "vue-cli-service build --mode test","build": "vue-cli-service build --mode production","lint": "vue-cli-service lint"},

示例图：

以上配置完以后需要在项目根目录增加自定义启动文件配置 (如配置文件中有"test": “vue-cli-service build --mode test”,则要增加.env.test)
如图示例：

.env.test文件中代码如下：

NODE_ENV='test'
VUE_APP_MODE='test'

<-------引用------->

import { loginOut, update_password } from "@/request/api";

示例图

vue拦截器及请求封装相关推荐

vue拦截器设置请求头失败，laravel设置前端请求头跨域
前端同事在vue的request里面的拦截器中设置请求头,发现'Authorization'可以正常添加到请求头,可以正常访问,但是添加其他的如'browserVersion'参数就不行, 会出现Re ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装 1
1.写在前面最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2. ...
vue拦截器实现统一token,并兼容IE9验证
项目中使用vue搭建前端页面,并通过axios请求后台api接口,完成数据交互.如果验证口令token写在在每次的接口中,也是个不小的体力活,而且也不灵活.这里分享使用vue自带拦截器,给每次请求的头 ...
Vue 拦截器原理和详细使用
拦截器原理和作用首先拦截器在src/utils/request.js 文件中,拦截器分为请求拦截器和响应拦截器. 页面中的每一个请求都会经过请求拦截和响应拦截,所以一般在这个文件进行操作. 这一文件 ...
.NET中间件以及VUE拦截器联合使用
.NET中间件以及VUE拦截器联合使用工作中遇见的问题,边学边弄,记录一下 Vue的UI库使用的是antvue 3.2.9版本的. 业务逻辑特性 //特性public class ModelEsi ...
Vue 拦截器对token过期处理
最近在做的一个项目,需要每个http请求下都要添加token,这样无疑是增加了工作量.而vue 拦截器interceptors正好可以解决我们的需求. 1. 在vueresource情况下设置t ...
拦截器获取请求参数post_SpringBoot拦截器如何获取http请求参数
1.1.获取http请求参数是一种刚需我想有的小伙伴肯定有过获取http请求的需要,比如想前置获取参数,统计请求数据做服务的接口签名校验敏感接口监控日志敏感接口防重复提交等等各式各样的场景 ...
Django中间件配合Vue拦截器的简单使用
axios拦截器是什么? axios拦截器可以拦截每一次的请求和响应,然后进行相应的处理.拦截器分为请求拦截器和响应拦截器,请求拦截器可以统一在你发送请求前在请求体里加上token:响应拦截器的话 ...

vue拦截器及请求封装

vue拦截器及请求封装相关推荐

最新文章

热门文章