@ 目标，通过运行一套代码，走两个登录页面

如：1号 http://localhost/saas ，走登录页面1，进入之后使用样式1
2号 http://localhost/supplier，走登录页面2，进入之后使用样式2

1.修改代码

1.修改后端的代理转发

由于前后端分离，部分路径走后端接口，所以要调整axios，让他固定使用一个前缀来走后端接口。（目的：不要使用默认根路径访问后端，不然会包401）

1.给所有的后端请求增加统一的请求前缀2.转发的时候去掉刚刚加的路由前缀，让后端认识

 // 配置转发代理
 devServer: {
     disableHostCheck: true,
     port: 8880,
     proxy: {
         '/api': {
             target: url,
             pathRewrite: {
                 '^/api': '/'
             }
         }
     }
 }

2. 控制访问的时候必须有对应的前缀进行路由跳转

1. 全站权限配置，只有相应的文件路径的请求才让通过，在对应的路由跳转拦截中增加以下代码

	//  获取浏览器中的地址  /supplier#/gen/design
	// 截取浏览器地址栏（端口后面的，#号前面，）； 如果既不是saas，也不是分供方，不让他跳转
	const urlPathName = window.location.pathname;
	let targetEnv = urlPathName.indexOf("#") != -1 ? targetEnv.substr(1,targetEnv.indexOf("#")) : urlPathName.substr(1);
	if(targetEnv !== "saas" && targetEnv !== "supplier"){
		return;
	}

2. 根据请求路径控制对应的动态路由的写入
   a.将saas路由文件和supplier路由文件拆开
   b.在引入的地方根据浏览器的地址进行区分引入
   c.防止登录之后有人修改地址栏，导致跳转错误，在登陆成功，将当前环境进行记录，后期刷新引入路由时，先根据登录环境进行判断。再根据url判断

3. 根据环境的不同，引入不同的路由，核心代码如下

let finalEnv = saasEnv;
let loginEnvSession = window.sessionStorage.getItem('worsoft-loginEnv');
if(loginEnvSession){
	let loginEnv = JSON.parse(loginEnvSession).content;
	// 1.登录之后取登录环境
	if(loginEnv === "saas"){
		finalEnv = saasEnv;
	}else if(loginEnv === "supplier"){
		finalEnv = supplierEnv;
	}
}else{
	// 2.未登录取url的路径
	const url = window.location.href
	if (url.indexOf("saas")!=-1) {
		finalEnv = saasEnv;
	} else if(url.indexOf("supplier")!=-1){
		finalEnv = supplierEnv;
	}
}

2.关于浏览器url的获取

浏览器路径：https://editor.csdn.net/md/?not_checkout=1

window.location.href
# 结果：'https://editor.csdn.net/md/?not_checkout=1'

window.location.host
#结果：'editor.csdn.net'

window.location.port
#结果 ''

window.location.pathname
# 结果： /md

window.location.search
#结果： '?not_checkout=1&articleId=122373101'

window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

 window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个

窗口，所以是没有后退返回上一页的

3.部署到nginx

经过无数次的测试，打包后的文件放在了\nginx-1.21.5\html\saas

server {
        listen       80;
        server_name  localhost;

		gzip on;
		gzip_static on;     # 需要http_gzip_static_module 模块
		gzip_min_length 1k;
		gzip_comp_level 4;
		gzip_proxied any;
		gzip_types text/plain text/xml text/css;
		gzip_vary on;
		gzip_disable "MSIE [1-6]\.(?!.*SV1)";
		client_max_body_size 20m;
		
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
		
		root   html\saas;

        location / {
            root html\saas;
			try_files $uri $uri/ /index.html;
        }
		
		
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

		
		# 配置后端路由
		location /api/ {
		   proxy_pass http://127.0.0.1:9999/;
		   proxy_connect_timeout 30s;
		   proxy_send_timeout 30s;
		   proxy_read_timeout 30s;
		   proxy_set_header X-Real-IP $remote_addr;
		   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		}
    }