两个不同的项目间页面的跳转

害嗨嗨，我又来了奥。今天呢，我们讨论的话题是“两个不同的项目间页面的跳转”。相信大家在项目中会遇到这样一个场景，在一个项目的页面中预览一个特殊的文件，但是这个文件是在另一个项目上，ip是不一样的。直接window.open(另一个项目地址)，会发现，没有权限，需要登录。但是为了安全又不能跳过这个登录，这该怎么办呢。

这里提供一个简单的方法。在我们需要跳转过去的项目中，在router里新增一个跳板页面，这个跳板页面可以不需要登录就能登录，可以当做是404这种的页面。现在的前端项目框架都比较成熟，路由守卫部分应该是有一个参数可以设置不需要token就能访问的，例如什么passNames、whiteList这种的参数，再把刚刚加的跳板页面路由的name放入这个数组，让他经过路由守卫的时候，不需要token就可以执行next()函数。

router/index.js新增的代码近似如下：

{
  path:'/special',
  name:'special',
  component:()=>import('@/views/Special/index.vue')
}

那我们在这个地址下的index.vue文件中可以做以下的事：

1.接受第一个项目传过来的参数token（这个是第一个项目访问的时候他们调接口拿到的，第二个项目不需关心其来源），然后存入storage里（这里可能是local也可能是session，根据项目来。项目中可能封装了storage，直接用里面的api即可）

2.接受第二个参数，跳转路由的完整地址viewUrl，在storage设置完token后，再跳转到新页面，新页面mounted里的详细代码如下

//获取第一个项目传过来的token，需要他们使用window.open(中间跳板页的地址带上需要跳转的地址,token)
let token = window.name;//这个就是他们传过来的token
//将网页中的redirectUrl后面的数据拿到，将重定向url后面的内容拿到，即将地址分为两部分，前面和redirectUrl=的后面部分
let viewUrl= decodeURIComponent(location.hash.split("redirectUrl=")[1]) 
//将token存入缓存中，利用项目封装的storage，不要自己写原生的方法，要求统一即可
storage.set(
  "token名称（根据项目来）",
  token
);
//跳转到新页面  ，这里也可以用replace，也更好
this.$router.push(viewUrl);

这里面有一个知识点，就是window.open函数的第二个参数，可以在他打开的网页中，使用

window.name来获取第二个参数的值，这个值如果是对象，记得在open传的时候使用JSON.stringify()方法将其转成json格式。即window.open(地址,JSON.stringify({a:1,b:2}))，随后在打开的页面中，使用JSON.parse(window.name)即可得到这个对象。还有一点就是为了安全性，不要把token放在路由中哦，所以用第二个参数。

这个方法需在这特殊页面加载完毕的时候触发，这个特殊页面就在此时会跳转到第一个项目想看到的页面，就不需要手动登录了。是不是很简单？好了，下次再见吧。