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