两个 vue 项目之间传值

项目实际用到的地方:跳转登录

前端 vue 脚手架 2.0

后端 java

因为这是两个项目,比方说a项目服务器地址是1.1,b项目服务器地址是1.2,那么cookie和localstroge就不能用了,因为你不管在1.1项目里面怎么存,在1.2里什么都拿不到,他都是根据IP和端口存的(当然,多个项目在一个服务器里面的情况除外,那样的话,只要你存了一个session,所有项目都拿的到)

在这里插入图片描述
在这里插入图片描述

因为我的b项目是后台管理系统,加入了路由守卫router.beforeEach,所以不管从哪进来的,都要先到登录页面,登录页面他还有后端返回的路由,然后还有页面初始化时的参数什么的配置

方法一:url传值(后端只写接口)

优点:方便,快捷,前后端无需做大量操作,后端只写接口,前端拿参数判断即可,双方身心愉悦

a项目点击按钮时,触发事件,同时把token带过去,(绝对不能把用户名或者密码带过去,太不安全了)

	a项目:
              window.open(
                ' http://192.168.3.56:8082/#/login?token=' + this.userInfo.token
              )

	b项目:
	
	java:接口a,特殊接口,接收token,返回登录信息和路由
	java:接口b,普通接口,接收用户名密码验证码,返回登录信息和路由
	
	在登录页面:
	
	
	created(){
			
		1. 先获取到整个url,
		2. 截取到token,
		if(如果token存在){
			3. 请求a接口
			4. 判断状态码,存路由,登录信息
			5. 跳首页
		}else{
			什么都不做,因为走到这里的判断就是他要使用用户名和密码登录了
		}
	}
	

方法一优点:前后端无需做大量操作,后端只写接口,前端接接口拿数据即可,双方身心愉悦

方法一缺点:在网速慢的情况下,用户真实token容易暴露(如下图…虽然说后端做了token过期功能吧,但是还有半小时的真空期,就是用户不管打开多少个浏览器,只要把这个链接复制粘贴,得,可劲造吧)

在这里插入图片描述

有的人说了,你在页面解析的时候把token存起来然后把地址栏清空不就行了吗?唉,你想多了,因为浏览器的机制是,不管你输入什么地址,他都要先去拿到你的地址去解析,然后请求服务器,这个过程就是和你的网速有关,也就是你的链接会直接显示在浏览器上,当你请求到了服务器,他才开始解析服务器的代码,这时候才会把你的token清空,所以这个功能在网速慢的情况下相当于没写,你懂我意思吗,小妖怪?

方法二(和方法一类似):后端写两个接口

接口a:用户传token,保存起来,返回一个临时id(一串数字,字符串都行)(键:临时id,值:用户token)
接口b:接收临时id,查找键值对,比较token,如果一样,返回路由,登录信息等,然后一定要记得删掉这条键值对数据,不要问我为什么,问就是服务器崩了

a项目:
	点击按钮的时候,就开始请求a接口,把用户token传给后端,(我们后端是java,他用的是redis的缓存什么的),然后拿到返回的临时id当做参数,用方法一的方法传到b项目中

b项目:
	登录页面:
	接收临时id,请求接口b,后端做判断,返回状态码或者路由,用户信息等
	前端根据返回的结果做逻辑

方法二优点:数据加密,安全性有保证

方法二缺点:对后端来说,怎么存是个问题,因为我们这是百万级项目,所以,当数据量大的时候,存取,然后删除,就变成了一个问题,前端身心愉悦,后端…唉

方法三:使用ifream和session

此方法还没用到,只是一个构想
就是把b项目使用ifream直接嵌入到a项目里,然后用a项目使用隐藏域(隐藏域:设置display为none的文本框), 然后获取到文本框的id,用postMessage方法 把a项目的东西post到b项目中,然后b项目要使用addEventListener监听,然后接收,接收到之后先存一下session,然后去请求普通的登录接口,再走方法,需要存session的理由是用户如果在a项目刷新的话…那值…你懂我意思吗?值就没了啊,然后你再去执行方法,十有八九就报错了
方法三因为只是个构想,所以说不出优点和缺点,因为能不能实现还是个问题,而且还存在着

问题1:a页面嵌入b页面时,b页面要加载,如果还没加载完,那就搞不通了啊,小妖怪
问题2:就是我们都是在网慢的情况下说的,同时打开两个项目,那网速实在是跟不上啊,别说传值了,页面能不能刷出来还是个问题

以上

Logo

前往低代码交流专区

更多推荐