iframe/window.open/a Three kinds of tags open a new page or a new window to set the request header; realize password-free login

Foreword:

For the front end, after logging in to obtain the token, the token will be stored in the cache and placed in the Request Headers request header, but there is no way to open a new page or new window using the three tags of iframe/window.open/a to bring the request header over. At this time, you need to set the request header yourself. There are two methods as follows:

Method 1 (not recommended):
The first method can be said to be the most used but also can be achieved. It is to spend token after jumping the link, http:// localhost: 8080/test? Token = 2345treghgfdsd3343444, and then take the request head of the new page from the link to the newly opened page from the link to the new page. Advantages: Direct stitching parameters behind the URL link, and there will be no cross -domain situation: it must be obtained on the page, and it cannot be taken out on the
request
interceptor
insert image description here

Method 2 (recommended):
The second method is to use cookies. Cookies can store tokens in the same domain name and get them on new pages, because the current page and the newly opened page belong to the same domain name.
Disadvantages: The two systems a and b can only use cookie access under the same domain name, and different domain names will have cross-domain situations. To solve the cross-domain problem, it is necessary to configure proxy forwarding through nginx.
Steps:
1. Install the js-cookie dependency package

npm install js-cooke

2. Save the cookie after getting the token

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

3. Obtain the token in the newly opened page.

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

Realize password-free login:
Use the iframe/window.open/a tag to embed or open the specified page of the third-party system. If you want to realize the login-free access to the page specified by the third party, you can store the token in the cookie in the current system, and the third-party system can obtain the token from the cookie and store it in the header.

Guess you like

Origin blog.csdn.net/weixin_42342065/article/details/127420783