Vue实现前端域名切换

Vue-实现前端域名切换

需求背景

目前有一个后台管理系统,属前后端分离项目.
然后最近有一个需求,就是一整套后台管理服务需要部署在不同区域(比如俄罗斯,美国,东京上).
同时,部署在不同区域的服务所管理的数据需要保持一致.但是不同区域的服务器在不同的私有云上

比如美国的服务器用的是亚马逊aws的服务,然后日本用的是微软云.
两朵云上的服务器对于开发的服务来说是网络隔离的,虽然可以让运维开通专线, 但是架构师说专线这种方式不太好

然后就说直接在不同区域部署相同的服务, 通过增加同步业务控制不同区域的数据保持一致
目前是实现了下面这样的效果(或者有其他更好的解决方式,希望能抛砖引玉:)

解决方案

初期决定通过后台代码增加同步业务来保持数据一致,但是无疑会增加劳动成本,而且人力本来就没那么多.
后来想到一个方式就是通过前端进行后台域名切换.目前是初步完成了一版可以用的.

前端用axios发送请求时需要一个请求地址+API,一般来说项目中都会封装一个全局的域名配置,在哪要用这个域名就在那个文件中import就行了.
比如先创建一个全局配置config.js

// 这一这里的SERVER_ADDRESS的值也可以从其他配置文件获取
let SERVER_ADDRESS = "www.xxxxxx.com";
export {
	SERVER_ADDRESS
};

然后再到vue文件中引用

<!--XXX.vue文件-->
<template>
  <div>
	  template
  </div>
</template>

<script>
import { SERVER_ADDRESS } from '@/api/config';
export default {

}
</script>

<style>

</style>

因为所有的axios请求中的域名都是从config.js中获取, 所以在上面的config.js中可以做一层判断
如果用户想使用美国的管理后台,那SERVER_ADDRESS = https://www.美国域名.com
如果用户想使用日本的管理后台,那么SERVER_ADDRESS = https://www.日本域名.com

SERVER_ADDRESS一经切换,所有通过axios发送的请求的域名都将会使用切换后的域名,
这也就可以实现用户保存的数据被发送到不同的后台管理服务里面,保存在不同的数据库中,
而此时也不需要再部署一套前端页面,也就实现了一套前端代码, 多个后台服务的需求了

切换方式

那么如何让用户切换动作生效呢,这个就涉及到下面几点了
0. config.js增加setInterval获取用户切换结果

1. 前端首页入口处增加环境选项,selector或者radio都可以
2. 通过change事件,监听用户选项的切换(默认一个环境)
3. change事件将用户切换结果保存到localStorage中
4. config.js通过获取localstorage中的用户切换结果设置SERVER_ADDRESS
5. 用户登录成功之后clearInterval

下面就是config.js的域名配置的路由方式,就是加了一层判断

let SERVER_ADDRESS = process.env.VUE_APP_SERVER_HOST;

let inter = setInterval(() => {
	let appType = localStorage.getItem("appType")
	if (appType && appType === "usa") {
		console.log("usa")
		SERVER_ADDRESS = "https://www.usa.com";
	} else if (appType && appType === "japan") {
		console.log("japan")
		SERVER_ADDRESS = "https://www.japan.com";
	} else {
		console.log("Default")
		SERVER_ADDRESS = "https://www.usa.com";
	}
}, 1000);
localStorage.setItem("appTypeInterval", inter)

export {
	SERVER_ADDRESS
};

然后前端增加一个用户切换环境的交互

PS:

1. 在登录成功之后删除相应的localStorage
2. 退出系统注意页面中appType的默认值,可能会影响整体的SERVER_ADDRESS切换, 需要在mounted时使用localStorage中的值初始化appType