vue使用两个axios 两个vue项目相互跳转

前言

需求在原来的项目基础上做浏览器3d呈现，我使用的是一个完整的框架展示3D文件，框架集成度太高，无法进行整合到自己的项目中，所以目前打算开两个服务器，进行页面跳转打开3d展示。
功能点：
1、如何跳转
2、如何传参

a标签实现新页面打开另一个项目

<a href="http://localhost:9999/" @click="transmit()" rel="nofollow noreferrer" target="_blank">新窗口打开3D文件</a>

解释：a标签可以访问外部资源  
href="http://localhost:9999/"改为我们需要的项目地址就可以了

跨域传值

方法一：适用于传递的值数据简单，保密性不高的情况下
	步骤一：http://~~~~?a=" "&b=" ",
	步骤二：新页面接收解析url地址获取后面的参数

但是我想传递的是token信息以及3D文件在服务器的URL数组，所以我用的cookie加密保存信息数据，新页面打开直接从cookie中获取解密数据
实现代码：

• 源vue项目代码
  1、封装cookie

/* 
* 设置cookie
* @params c_name key
* @params value value
* @params expiremMinutes 过期时间 单位：分钟
* @return null
*/
function setCookie(c_name, value, expiremMinutes) {
  var exdate = new Date();
  exdate.setTime(exdate.getTime() + expiremMinutes * 60 * 1000);
  document.cookie = c_name + "=" + escape(value) + ((expiremMinutes == null) ? "" : ";expires=" + exdate.toGMTString());
}
//escape对字符串编码函数

/* 
* 读取cookie
* @params c_name key
* @return value || ''
*/
function getCookie(c_name) {
  if (document.cookie.length > 0) {
    var c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1;
      var c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1)
        c_end = document.cookie.length
      return unescape(document.cookie.substring(c_start, c_end))
    }
  }
  return ""
}

/* 
* 删除cookie
* @params c_name 
* @return null
*/
function delCookie(c_name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(c_name);
  if (cval != null) {
    document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
  }
}

export {
  setCookie,
  getCookie,
  delCookie
}

2、点击按钮时新页面打开同时把信息保存到cookie中

<el-button>
 <!-- <a :href="hrefapi" rel="nofollow noreferrer" target="_blank">新窗口打开3D图片</a> -->
 <a href="http://localhost:9999/" @click="transmit()" rel="nofollow noreferrer" target="_blank">新窗口打开3D文件</a>
</el-button>

import { setCookie, getCookie, delCookie } from '@utils/cookie';

data(){
    return{
      fileList: [ // 跨域3d项目传递的文件列表
        {
          url:'https://````/2020/01/06/brain_A.vtk',
          name: 'brain_A.vtk'
        },
        {
          url:'https:````/brain_B.vtk',
          name: 'brain_B.vtk'
        },
        {
          url:'https://````/brain_C.vtk',
          name: 'brain_C.vtk'
        },
        {
          url:'https://```/2020/01/06/brain_D.vtk',
          name: 'brain_D.vtk'
        }
      ],
      girdertoken: '' // 跨域3d项目传递的token信息
    }
  },
created(){
    // 获取token信息 项目token保存在sessionStorage中
    this.girdertoken = sessionStorage.getItem('token')
  },
methods:{
    transmit(){
      let base64 = new this.Base64();
      setCookie('transmit-files', JSON.stringify(this.fileList), 10080);
      setCookie('transmit-token', this.girdertoken, 10080);
    },
}

• 3d项目代码
  1、项目存在包js-cookie 所以不需要封装cookie了，但是需要解密的函数

import cookies from 'js-cookie';

2、一进入页面就需要解析 写在created里面

data() {
    return {
      fileLists:[ // 接收平台传过来的的文件列表
      ],
      token: '' , // 接收平台传过来的token
    };
  },
  created() {
    this.fileLists = JSON.parse(this.getCookie('transmit-files')) // 接收传过来的file列表
    this.token = cookies.get('transmit-token')
  },
   methods: {
	    getCookie(c_name) {
	      if (document.cookie.length > 0) {
	        console.log('document.cookie',document.cookie)
	        var c_start = document.cookie.indexOf(c_name + "=");
	        if (c_start != -1) {
	          console.log('c_start',c_start)
	          c_start = c_start + c_name.length + 1;
	          var c_end = document.cookie.indexOf(";", c_start);
	          if (c_end == -1)
	            c_end = document.cookie.length
	            console.log('document.cookie.substring(c_start, c_end)',document.cookie.substring(c_start, c_end))
	          return unescape(document.cookie.substring(c_start, c_end))
	        }
	      }
	      return ""
	    },
}

cookie传参问题处理

1、cookie传参只有在同源的网络才可以进行传参
如上述地址都是localhost本地地址
2、cookie传参有大小限制，而且cookie中的值会随接口请求进行携带，如果携带值过长就会报403，请求头过大无法发送请求的错误

问题处理：
可以从url地址中进行传递token

window.open(path+`?token=${token}`)

网页打开即解析地址获取token存储到sessionStorage中

serilizeUrl(url){ // 解析url地址参数
    let urlObject = {}; // 定义一个对象用来保存最后的值
    if(/\?/.test(url)){
      // 正则test（）方法只需要待测试字符串中包含了要测试的字符串就是ture
      // /\?/.test(url):url中是否含有? 返回false或者true
      let urlString = url.substring(url.indexOf("?")+1);
      // 这里调用了字符串的两个方法 indexOf()和substring()
      // indexOf()返回字符串中？的索引下标 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
      // substring()字符串截取方法 substring(strat,end) 方法用于提取字符串中介于两个指定下标之间的字符 strat起始位置 end结束位置如果没有设置就一直截取到字符串末尾
      // url.substring(url.indexOf("?")+1)截取从?后面所有字符
      let urlArray = urlString.split("&");
      // 字符串的split()方法 字符串转数组,数组每一项都类似a=1的字符串
      for(let i=0;i<urlArray.length;i++){
        // 遍历每一项
        let urlitem=urlArray[i];
        let item =urlitem.split("=");
        // 对数组每一项进行再次分割
        urlObject[item[0]] = item[1];
        // 添加到对象中
      }
      return urlObject;
    }
    return null;
  },

let arr=this.serilizeUrl(window.location.href)
    if(arr){
      if(arr.token){
        sessionStorage.setItem('token', arr.token)
        this.token = arr.token
      }
    }
    if(sessionStorage.getItem('token')){
      console.log(sessionStorage.getItem('uid'))
      // this.uid = sessionStorage.getItem('uid')
      this.token = sessionStorage.getItem('token')
    }