pc通过window.open打开新页面，新页面要使用原来页面的token

原文链接：

https://blog.csdn.net/weixin_42342065/article/details/127420783
(以下为本人笔记使用)

对于前端来说，一般在登录获取token之后会把token存入缓存以及放置在Request Headers请求头中，但是使用iframe/window.open/a这三种标签打开新页面或新窗口是没有办法把请求头带过去的，这个时候就需要自己设置请求头，有如下有两种办法：

方法一(不推荐)：

第一种方法可以说是最不得已使用但是也能实现的方法，就是在跳转链接后面拼token，http://localhost:8080/test?token=2345treghgfdsd334344，然后到新打开的页面中从链接中取token存在新页面的请求头部
优点：url链接后面直接拼接参数，不会出现跨域的情况
取：一定是在页面获取，无法在请求拦截器取出

在这里插入图片描述

方法二(推荐)：

第二种方法是使用Cookie。Cookie在同域名中是可以存token并且在新页面中获取的，因为当前页面和新打开的页面属于同一个域名。
缺点：a,b两个系统只有同域名下才能使用cookie存取，不同域名会出现跨域情况，解决跨域的话就要通过nginx配置代理转发。
步骤：
1.安装js-cookie依赖包

npm install js-cooke

2.在获取token之后存入Cookie

import Cookie from 'js-cookie'
Cookie.set('token', token)

3.在新打开的页面中获取token。

//如果新打开的页面是另外一个项目(前提是另一个项目也是自己的)的话可以在请求拦截request.interceptors.js中获取
import Cookie from 'js-cookie'
const token = Cookie.get('token')
//如果新打开的页面是另外一个项目(不是自己的项目)的话我们只负责Cookie.set存，取得话需要根据实际情况考虑

实现免密登录：
使用iframe/window.open/a标签可以嵌入或打开第三方系统指定页面，如果想实现到第三方指定页面免登录，则可以在当前系统中把token存入cookie,第三方系统从cookie中获取token存入头部，即可实现。

在这里插入图片描述
js-cookie 官网：https://www.npmjs.com/package/js-cookie