vue拦截器及请求封装代码

 更新时间:2024年08月30日 14:39:17   作者:接口文帝  
这篇文章主要介绍了vue拦截器及请求封装代码,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

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, // 当跨域请求时发送cookie
     timeout: 50000 // 请求超时
 });
 
 //添加请求拦截器   请求接口统一添加token
 service.interceptors.request.use(
     config =>{
        config.headers['PC-LOGIN-SESSION-ID'] = cookies.get('supplier_token')||''
        //  config.headers.PC-LOGIN-SESSION-ID = cookies.get('gys_token');  //请求添加token
         return config;
     },
     error =>{
         return Promise.reject(error);
     }
 )
 
 // 响应拦截器
 service.interceptors.response.use(
     response => {
         //如果接口返回token,替换本地旧token
         if (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.js 开发环境搭建最简单攻略

    详解vue.js 开发环境搭建最简单攻略

    本篇文章主要介绍了vue.js 开发环境搭建最简单攻略,这里整理了详细的步骤,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • vue-meta实现router动态设置meta标签的方法

    vue-meta实现router动态设置meta标签的方法

    这篇文章主要介绍了vue-meta实现router动态设置meta标签,实现思路非常简单内容包括mata标签的特点和mata标签共有两个属性,分别是http-equiv属性和name属性,本文通过实例代码给大家详细讲解需要的朋友可以参考下
    2022-11-11
  • vue使用关于speak-tss插件的详细介绍及一些配置项

    vue使用关于speak-tss插件的详细介绍及一些配置项

    本文详细介绍了speak-tss插件在Vue3中的使用方法和配置,首先需要下载依赖,然后引入插件,并进行实例化和配置,配置项包括音量、语言、语音、语速、音调等,speak-tss支持多种语言和语音,适用于需要文本语音播报的场景
    2024-09-09
  • VUE django 跨域、csrf令牌的问题

    VUE django 跨域、csrf令牌的问题

    在Vue和Django进行前后分离开发时,经常会遇到跨域和CSRF令牌验证问题,本文详细介绍了如何在Django后端设置视图获取CSRF令牌,并在Vue前端进行配置以确保安全的数据交互,文章提供了后端视图创建、settings配置以及前端axios请求封装的具体方法
    2024-09-09
  • 使用Vue3生成二维码和条形码详细图文教程

    使用Vue3生成二维码和条形码详细图文教程

    在Vue项目和微信小程序中生成二维码和条形码是一个常见的需求,主要用于分享、产品识别等场景,这篇文章主要给大家介绍了关于使用Vue3生成二维码和条形码的相关资料,需要的朋友可以参考下
    2024-09-09
  • Vue解决element-ui消息提示$message重叠问题

    Vue解决element-ui消息提示$message重叠问题

    这篇文章主要为大家介绍了Vue解决element-ui消息提示$message重叠问题,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • axios请求中断的几种方法

    axios请求中断的几种方法

    在实际应用场景中,假如有一个下载或者导出请求,数据量非常大的情况下,接口响应的会很慢,这时候我我们想中断请求,该怎么做呢?本文给大家介绍了axios请求中断的几种方法,需要的朋友可以参考下
    2024-10-10
  • Vue的Scroll滚动事件触发方式

    Vue的Scroll滚动事件触发方式

    这篇文章主要介绍了Vue的Scroll滚动事件触发方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 简单了解vue中父子组件如何相互传递值(基础向)

    简单了解vue中父子组件如何相互传递值(基础向)

    这篇文章主要介绍了简单了解vue中父子组件如何相互传递值(基础向),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • Element-ui Drawer抽屉按需引入基础使用

    Element-ui Drawer抽屉按需引入基础使用

    这篇文章主要为大家介绍了Element-ui Drawer抽屉按需引入基础使用,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论