vue中使用axios固定url请求前缀

 更新时间:2022年12月09日 10:29:09   作者:Agwenbi  
这篇文章主要介绍了vue中使用axios固定url请求前缀的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用axios固定url请求前缀

main.js中添加:

使用方法:

定义axios默认路径前缀或动态修改前缀

如:每个请求url前都要加一个前缀,但会根据开发环境不同而变化,那么我们可以写一个方法去引用,方便后面维护

.env.development 开发文件中写入要用的服务编码

# 微服务编码
VUE_APP_SERVICE_PREFIX = '/0201010254'

src/settings.js 新建的settings文件中引入

module.exports = {
  /**
   * 主站标题
   * @type {string}
   */
  title: '开发项目名称',
 
  /**
   * @type {boolean} true | false
   * @description Whether fix the header
   */
  fixedHeader: false,
 
  /**
   * @type {string | array} 'production' | ['production', 'development']
   * @description Need show err logs component.
   * The default is only used in the production env
   * If you want to also use it in dev, you can pass ['production', 'development']
   */
  errorLog: 'production',
  /**
   * base API
   */
  baseApi: process.env.VUE_APP_BASE_API,
  /**
   * 服务编码
   */
  servicePrefix: process.env.VUE_APP_SERVICE_PREFIX,
 
}

之后请求文件中引入

新建api/app.js 封装axios请求并引用自定义的服务编码文件

// 应用层封装接口
import request from '@/utils/request'
import settings from '@/settings'
 
// 获取配置 不需替换
export function getAppConfig(params) {
  return request({
    url: settings.servicePrefix + '/config',
    method: 'get',
    params
  })
}

其中的request文件是引用自建的请求拦截文件,根据各自需求

import axios from 'axios'
import store from '@/store'
import { getToken, removeToken } from '@/utils/auth'
 
const BASE_URL = process.env.VUE_APP_BASE_API
 
// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 60 * 1000 // request timeout
})
 
// request interceptors
service.interceptors.request.use(
  config => {
    // do something before request is sent
    // 设置baseURL
    config.baseURL = config.url.startsWith('/mock') ? '' : BASE_URL
    const token = getToken()
    if (!config.noAuth && token) {
      // let each request carry token
      config.headers['Authorization'] = token
    }
    if (store.state.user.info && store.state.user.info.comId) {
      config.headers['comId'] = store.state.user.info.comId
      config.headers['comCode'] = store.state.user.info.comCode
      config.headers['groupUserCode'] = store.state.user.info.groupUserCode
      config.headers['userCode'] = store.state.user.info.userCode
    }
    return config
  },
  error => {
    // do something with request error
    return Promise.reject(error)
  }
)
 
// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
   */
 
  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    if (response.headers.newjwt) {
      store.dispatch('user/setToken', response.headers.newjwt)
    }
    if ((response.data.status && +response.data.status === 16) || response.status === 401) {
      if (response.status === 401) {
        return Promise.reject('没有接口权限,请联系管理员')
      } else {
        setTimeout(() => {
          // 清除登录状态
          removeToken()
          window.location.href = '/'
        }, 1000)
        return Promise.reject('登录超时,请重新登录')
      }
    }
    if (response.config.handleResponse) {
      return response
    } else {
      const { head, body } = response.data
      // 旧数据格式分为head和body两部分,现在使用ApiResponse不会再出现这两部分,此处为兼容旧格式的临时方案
      if (head && body) {
        // 正常返回
        if (+head.code === 1) {
          return body
        } else {
          return Promise.reject(head.msg || '未知错误')
        }
      } else {
        const { status, statusText, data } = response.data
        if (+status === 0) {
          return data
        } else {
          if (response.config.handleError) {
            return Promise.reject(response.data)
          } else {
            return Promise.reject(statusText || '未知错误')
          }
        }
      }
    }
  },
  error => {
    // 非取消请求
    if (!axios.isCancel(error)) {
      // 401无权限判断
      if (error.response && error.response.status === 401) {
        return Promise.reject('没有接口权限,请联系管理员')
      } else if (error.response && error.response.status === 531) {
        setTimeout(() => {
          // 清除登录状态
          removeToken()
          window.location.href = '/'
        }, 1000)
        return Promise.reject('登录超时,请重新登录')
      }
    }
    return Promise.reject(error)
  }
)
 
export default service

request.js中把token内容抽离出来方便管理

src下新建/utils/auth.js

import Cookies from 'js-cookie'
 
const TokenKey = 'Admin-Token'
 
export function getToken() {
  return Cookies.get(TokenKey)
}
 
export function setToken(token) {
  if (!token || token === 'null') {
    return
  }
  sessionStorage.setItem('jwt', token)
  return Cookies.set(TokenKey, token)
}
 
export function removeToken() {
  return Cookies.remove(TokenKey)
}

最终页面使用axios

import { getAppConfig } from '@/api/app'
//请求
 const params = {}
        getAppConfig(params).then(res => {
          this.loading = false
          console.log(res)
        }).catch(e => {
          this.loading = false
          this.$message.error(e.toString())
        })

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue生命周期activated之返回上一页不重新请求数据操作

    Vue生命周期activated之返回上一页不重新请求数据操作

    这篇文章主要介绍了Vue生命周期activated之返回上一页不重新请求数据操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue.js $refs和$emit 父子组件交互的方法

    vue.js $refs和$emit 父子组件交互的方法

    本篇文章主要介绍了vue.js $refs和$emit 父子组件交互的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue中v-for加载本地静态图片方法

    vue中v-for加载本地静态图片方法

    下面小编就为大家分享一篇vue中v-for加载本地静态图片方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue路由守卫+登录态管理实例分析

    vue路由守卫+登录态管理实例分析

    这篇文章主要介绍了vue路由守卫+登录态管理,结合实例形式分析了vue路由守卫与登录态管理相关操作步骤与实现技巧,需要的朋友可以参考下
    2019-05-05
  • vue实现购物车完整功能

    vue实现购物车完整功能

    这篇文章主要为大家详细介绍了vue实现购物车完整功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

    vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

    这篇文章主要介绍了vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀的相关知识,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-06-06
  • vue 项目页面卡死原因排查分析

    vue 项目页面卡死原因排查分析

    这篇文章主要介绍了vue 项目页面卡死原因排查分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue如何跨组件传递Slot的实现

    Vue如何跨组件传递Slot的实现

    这篇文章主要介绍了Vue如何跨组件传递Slot的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • vue-table实现添加和删除

    vue-table实现添加和删除

    这篇文章主要为大家详细介绍了vue-table实现添加和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue获取input值的四种常用方法

    Vue获取input值的四种常用方法

    Vue是一种流行的Web开发框架,它提供了一个双向绑定的语法糖。在Vue中,我们可以很容易地获取页面上的数据,并且可以实时的响应其变化,这篇文章主要给大家介绍了关于Vue获取input值的四种常用方法,需要的朋友可以参考下
    2023-09-09

最新评论