求指导,用VUE在现有代码的基础上做单点登录

[YS_forevery]

最近很头痛,做了一个网站,每次点用户信息的时候都需要重新登录,所以想到了单点登录,前台VUE后台springboot,代码如下所示,各位大牛帮个忙,vue这块完全不会啊

const API_PROXY = 'https://bird.ioliu.cn/v1/?url=';
			var url = "http://39.96.218.102:8070"
			var app = new Vue({
				el: "#app",
				data: {
					pic: "",
					username: "",
					time: "",
					shopName: "",
					p: "",
					sex: "",
					birth: "",
					jobNo: "",
					positionName: "",
					userId:""
				},
				mounted: function() {
					var id = decodeURIComponent(location.search).slice(4, 5); //获取url中"?"符后的字串
					console.log(id)
					axios.Get(API_PROXY + url + "/mobile/home/myinfos/" + id);
						.then(res => {
							console.log(res.data.code)
							if(res.data.code == 500) {
								location.href = 'index.html'
							}
							app.p = id
							//console.log(app.p)
							app.list = res.data
							//工号
							app.jobNo = app.list.jobNo
							//头像
							app.pic = app.list.avatar
							//name
							app.username = app.list.userName
							//生日
							app.birth = app.list.birth
							//加入时间
							app.time = app.list.createTime
							//把加入时间转换为时间戳
							var time1 = Date.parse(new Date(app.time))
							//获取当前时间戳
							var timestamp1 = Date.parse(new Date());
							//差值
							var current = timestamp1 - time1
							//岗位
							app.positionName = app.list.positionName
							//加入天数
							var days = parseInt(current / (1000 * 60 * 60 * 24));
							app.time = days
							//门店
							app.shopName = res.data.shopName

							//id
							app.userId = res.data.userId
						})
						.catch(err => {
							//console.log(err)
						})

				}
			})
		</script>

这里是用户信息的代码,每次点这个都会重新登录.....
下面是登录界面的代码

const API_PROXY = 'https://bird.ioliu.cn/v1/?url=';
			var timeOutEvent = 0;
			var app = new Vue({
				el: "#app",
				data: {
					username: "",
					pass: "",
					id:""
				},
				methods: {
					submit:function() {
						console.log("111")
						const url = "http://39.96.218.102:8070";
						if(this.username == "") {
							alert("手机号不能为空")
						} else if(this.pass == "") {
							alert("密码不能为空")
						} else {
							var data = {
								phone: this.username,
								pass: this.pass,
							};
							axios.post(API_PROXY + url+"/mobile/sys/login", data)
								.then(res => {
									//console.log(res.data.msg);
									if(res.data.msg == "运行时异常:手机号不存在") {
										alert("该用户不存在,请核对手机号");
										return false;
									} else if(res.data.msg == "运行时异常:用户不存在/密码错误") {
										alert("密码错误,请核对密码");
										return false;
									}
									if(res.data.msg == "操作成功") {
										console.log("登陆成功")
										console.log(data)
										//console.log(res)
										axios.post(API_PROXY + url + "/mobile/home/myinfos",data)
											.then(result=>{
												app.id = result.data.userId
												console.log(app.id)
												location.href = 'user.html?id='+app.id;
											})
									}
								})
								.catch(err => {
									//console.log(err)
								})
								
								
						}
					},
					//查看密码按钮
					gotouchstart() {
						let that = this;
						clearTimeout(timeOutEvent); //清除定时器
						timeOutEvent = 0;
						timeOutEvent = setTimeout(function() {
							//执行长按要执行的内容，
							//console.log("长按");
							$("#ipt").attr("type", "text");
						}, 100); //这里设置定时
					},
					//手释放，如果在100毫秒内就释放，则取消长按事件
					gotouchend() {
						clearTimeout(timeOutEvent);
						if(timeOutEvent != 0) {
							$("#ipt").attr("type", "password");
							//console.log("取消")
						}
					},
					
				}
			})

真的一脸懵逼,求大牛指点

[karlpan01]

去vue官方网站，一点点理解vue的规定和模式。