前端(axios)请求后端接口二次封装

本文档展示了如何在Vue.js应用中使用axios库进行API请求管理。通过创建axios实例,设置请求和响应拦截器,实现请求头的自定义,包括token和租户id的添加,以及错误处理和登录状态过期的处理。同时,引用了element-ui的通知组件进行错误提示,并在登录状态过期时提供重新登录的选项。
摘要由CSDN通过智能技术生成

在src的utils写request.js

					import axios from 'axios'
					import router from '@/router/routers'
					import { Notification, MessageBox } from 'element-ui'
					import store from '../store'
					import { getToken,getTenantIds } from '@/utils/auth'
					import Config from '@/settings'
					import Cookies from 'js-cookie'
					
					// 创建axios实例
					const service = axios.create({
					  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
					  timeout: Config.timeout // 请求超时时间
					})
					
					// request拦截器
					service.interceptors.request.use(     
					   //interceptors.request.use是axios的请求拦截器,在请求前做配置
					  config => {
					    if (getToken()) {
					      config.headers['Authorization'] = getToken() 
					      // 让每个请求携带自定义token(加密token) 请根据实际情况自行修改
					    }
					    config.headers['Content-Type'] = 'application/json'
					    config.headers['Tenant-id']= getTenantIds()
					    //tenant-id是租户id,就是每个ajax请求时传给后台的判断条件以此判断给前端返回的数据
					    return config
					  },
					  error => {
					    // Do something with request error
					    console.log(error) // for debug
					    Promise.reject(error)
					  }
					)
					
					// response 拦截器
					service.interceptors.response.use(
					  //interceptors.response.use是axios响应拦截器,在响应之后对数据进型处理
					  response => {
					    const code = response.data.code
					    if (code) {
					      if (code < 200 || code > 300) {
					        if(code ===401){
					          MessageBox.confirm(
					            '登录状态已过期,您可以继续留在该页面,或者重新登录',
					            '系统提示',
					            {
					              confirmButtonText: '重新登录',
					              cancelButtonText: '取消',
					              type: 'warning'
					            }
					          ).then(() => {
					            store.dispatch('LogOut').then(() => {
					              // location.reload() // 为了重新实例化vue-router对象 避免bug
					              router.push({ path:'/' })
					            })
					          })
					        }else{
					          Notification.error({
					            title: response.data.msg
					          })
					          return Promise.reject('error')
					        }
					        
					      }else {
					        return response.data.data
					      }
					    } else {
					      return response.data
					    }
					  },
					  error => {
					    let code = 0
					    try {
					      code = error.response.data.status
					    } catch (e) {
					      if (error.toString().indexOf('Error: timeout') !== -1) {
					        Notification.error({
					          //Notification是elementui的通知组件
					          title: '网络请求超时',
					          duration: 5000
					        })
					        return Promise.reject(error)
					      }
					    }
					    if (code) {
					      if (code === 401) {
					        MessageBox.confirm(
					          '登录状态已过期,您可以继续留在该页面,或者重新登录',
					          '系统提示',
					          {
					            confirmButtonText: '重新登录',
					            cancelButtonText: '取消',
					            type: 'warning'
					          }
					        ).then(() => {
					          store.dispatch('LogOut').then(() => {
					            // location.reload() // 为了重新实例化vue-router对象 避免bug
					            router.push({ path:'/' })
					          })
					        })
					      } else if (code === 403) {
					        router.push({ path: '/401' })
					      }else {
					        const errorMsg = error.response.data.msg
					        if (errorMsg !== undefined) {
					          Notification.error({
					            title: errorMsg,
					            duration: 5000
					          })
					          
					        }
					      }
					    } else {
					      Notification.error({
					        title: '请求失败',
					        duration: 5000
					      })
					     
					      
					    }
					    return Promise.reject(error)
					  }
					)
					export default service

setting.js中

		module.exports = {
		  /**
		   * @description 网站标题
		   */
		  title: '峥峰集团内部管理系统',
		  /**
		   * @description 是否显示 tagsView
		   */
		  tagsView: true,
		  /**
		   * @description 固定头部
		   */
		  fixedHeader: true,
		  /**
		   * @description 记住密码状态下的token在Cookie中存储的天数,默认1天
		   */
		  tokenCookieExpires: 1,
		  /**
		   * @description 记住密码状态下的密码在Cookie中存储的天数,默认1天s
		   */
		  passCookieExpires: 1,
		  /**
		   * @description 是否只保持一个子菜单的展开
		   */
		  uniqueOpened: true,
		  /**
		   * @description token key
		   */
		  TokenKey: 'ADMIN-TOEKN',
		  tenantId:'tenantId',
		  /**
		   * @description 请求超时时间,毫秒(默认2分钟)
		   */
		  timeout: 12000,
		  /**
		   * @description 是否显示logo
		   */
		  sidebarLogo: true,
		  /**
		   * 是否显示设置的底部信息
		   */
		  showFooter: false,
		  /**
		   * 底部文字,支持html语法
		   */
		  footerTxt: '© 2019 Zheng Jie <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License 2.0</a>'
		  /**
		   * 备案号
		   */
		//   caseNumber: '浙ICP备18005431号'
		}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值