需求：首次登录域名为aa.com，之后登录系统后在系统内某个模块设置三级域名为second，之后退出登录到aa.com,登录进入系统后域名自动变为second.aa.com，最后退出的域名也是second.aa.com，通过不同的域名配置动态的登录页面和系统内布局样式等

1.效果

原域名

输入账号登录后，添加了自定义的域名test在最前面

2.环境配置

要实现这个功能需要区分生产环境（本地）development和开发环境（线上）production

3.登录页请求

需要在登录页http://test.xx.com.cn/#/login页面直接调用后端接口，后端会返回登录页的公司图标等样式文件。在登录页肯定没有token，需要后端根据域名判断

4.登录系统后

登录系统后需要根据登录返回的domain域名来跳转，需要区分环境判断。例子如下

this.$store.dispatch("userInfo/Login", this.userLoginForm).then((domain) => {if (process.env.NODE_ENV === "development") {this.$router.push({ path: "/" });} else {// 构建跳转URLconst targetUrl = this.buildRedirectUrl(domain);// // 跳转到目标地址window.location.href = targetUrl;}}).catch(() => {});// 构建跳转URL的方法buildRedirectUrl(domain) {const primaryDomain = domain? `http://${domain}.xx.com.cn/`: `http://xx.com.cn/`;// 构建完整URLreturn primaryDomain;},

5.axios设置

跳转后会出现跨域的问题，所以axios配置也要添加判断,

const instance = axios.create({baseURL: process.env.NODE_ENV === 'production' ? undefined : 'http://xx.com.cn/',withCredentials: process.env.NODE_ENV === 'production' ? true : false  // 线上必须要设置允许跨域
})

6.退出登录

在清空了token后直接跳转到login即可，路由拦截的话也是直接跳转到/login就行

       this.$router.replace("/login");

文章到此结束，希望对你有所帮助~