vue-antdesign框架 实现动态服务配置
2023-02-22 本文已影响0人
哈哈乐乐WXT
需求: 首次登录进入界面 需要 正常请求,返回多选列表,根据返回列表对应的服务地址,更换全局服务地址
实现思路:
定义本地存储服务地址(可以同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