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存入头部,即可实现。

pc通过window.open打开新页面,新页面要使用原来页面的token_第1张图片
js-cookie 官网:https://www.npmjs.com/package/js-cookie

const token = Cookie.get(“token”) || “”;
token && (config.headers.Authorization = “Bearer” + " " + token);

你可能感兴趣的:(前端)