同一套vue代码部署一次，实现两个登录页入口 |
您所在的位置：网站首页 › vue路由后退到登录页 › 同一套vue代码部署一次，实现两个登录页入口 |
同一套vue代码部署一次，实现两个登录页入口
|
@ 目标，通过运行一套代码，走两个登录页面 如：1号 http://localhost/saas ，走登录页面1，进入之后使用样式1 2号 http://localhost/supplier，走登录页面2，进入之后使用样式2 1.修改代码 1.修改后端的代理转发由于前后端分离，部分路径走后端接口，所以要调整axios，让他固定使用一个前缀来走后端接口。（目的：不要使用默认根路径访问后端，不然会包401） 1.给所有的后端请求增加统一的请求前缀 根据请求路径控制对应的动态路由的写入 a.将saas路由文件和supplier路由文件拆开 b.在引入的地方根据浏览器的地址进行区分引入 c.防止登录之后有人修改地址栏，导致跳转错误，在登陆成功，将当前环境进行记录，后期刷新引入路由时，先根据登录环境进行判断。再根据url判断 根据环境的不同，引入不同的路由，核心代码如下 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; } } |
2.转发的时候去掉刚刚加的路由前缀，让后端认识【本文地址】