vue-antdesign框架 实现动态服务配置

需求: 首次登录进入界面 需要 正常请求,返回多选列表,根据返回列表对应的服务地址,更换全局服务地址

实现思路:

定义本地存储服务地址(可以同store存储结合使用),登录页面加载时情况当前服务存储, 正常返回列表选择地址,然后存储到本地;在请求封装做统一拦截,更改服务配置baseUrl

具体实现:

image.png

登录页放下拉服务列表自定义,首次无默认,change事件后获取当前值并存储 页面代码如下

// vue
  <a-form-item label="测试服务地址">
        <a-select

          placeholder="请选择测试地址"
          v-model="urlPath"
          @change="handleChangeUrl"
        >
          <a-select-option key="1" value=" http://www.baidu1.com">
            http://www.baidu1.com
          </a-select-option>
            <a-select-option key="2" value=" http://www.zhihu2.com">
            http://www.zhihu2.com
          </a-select-option>
        </a-select>
      </a-form-item>

// methods
    handleChangeUrl (url) {
      this.$db.save('serverPath', url)
      console.log(this.$db.get('serverPath'))
    },

// 路由拦截处
FEBS_REQUEST.interceptors.request.use((config) => {
  let serverPath = db.get('serverPath')
  if (JSON.stringify(serverPath) === '{}'||'') {
    serverPath = ''
  }
  if (serverPath) {
    config.baseURL = serverPath
  }

})

注意: 退出时候需要清空 本地存储serverPath

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,997评论 19 139
  • 1. vue实现双向绑定的原理? MVVM 模式在于数据与视图的保持同步,意思是说数据改变时会自动更新视图,视图发...
    逸軒阅读 915评论 0 4
  • 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在...
    lan1997阅读 1,374评论 0 1
  • vue中Axios的封装和API接口的管理 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是...
    我王某不需要昵称阅读 700评论 0 2
  • vue中Axios的封装和API接口的管理 我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是...
    古月梦回阅读 1,416评论 0 0