vue2设置自定义域名跳转

需求：首次登录域名为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 {
                // 构建跳转URL
                const targetUrl = this.buildRedirectUrl(domain);
                // // 跳转到目标地址
                window.location.href = targetUrl;
              }
            })
            .catch(() => {
   
            });
    // 构建跳转URL的方法
    buildRedirectUrl(domain) {

      const primaryDomain = domain
        ? `http://${domain}.xx.com.cn/`
        : `http://xx.com.cn/`;
      // 构建完整URL
      return 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");

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