vue:系统A页面引入系统B所有页面

①系统A页面代码
内嵌的iframe

  <div class="hello">
    <h1>{{ msg }}</h1>
    <iframe src="http://localhost:8091/ulanefront/#/imLogin?username=xxx&password=@2WSX1qaz" width="100%" height="900px"></iframe>
  </div>

②系统B页面代码

此代码是使用了路由钩子函数,代码逻辑是将路由请求中带有参数名和密码的判断出来,让其跳转到登录页面,在登录页面的 created 中,根据有没有登录的账号密码,去触发登录方法,从而登录项目B。

/*router.beforeEach((to, from, next) => {*/
let kk = window.location.href;
 if (kk.includes('username') && kk.includes('password')) {
   let username = to.query.username;
   let password = to.query.password;
   flag = 0;
   next({
     name: LOGIN_PAGE_NAME,
     query: {
       username: username,
       password: password,
     }
   })
 }

③系统B页面代码(方式2)
或直接通过账号密码调用登录方法,返回token,并将其存储到前端

let kk = window.location.href;
if (kk.includes('uname')) {
    let username = to.query.username;
    let password = to.query.password;
	userManageApi.login({data: {username, password}}).then(res => {
	  setToken(res.data.data); // 存储token
	  next({
		name: homeName // 跳转到homeName页
	  })
	})
}	

你可能感兴趣的:(vue.js,前端)