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域名来跳转,需要区分环境判断。例子如下

javascript 复制代码
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配置也要添加判断,

javascript 复制代码
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就行

javascript 复制代码
       this.$router.replace("/login");

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

相关推荐
ai小鬼头22 分钟前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's29 分钟前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫1 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim1 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim1 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心1 小时前
vben 之 axios 封装
前端·javascript·学习
漫谈网络1 小时前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
遗憾随她而去.2 小时前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
xjt_09012 小时前
浅析Web存储系统
前端
foxhuli2292 小时前
禁止ifrmare标签上的文件,实现自动下载功能,并且隐藏工具栏
前端