iframe/window.open/a 3種類のタグで新規ページまたは新規ウィンドウを開いてリクエストヘッダを設定し、パスワードレスログインを実現

序文:

フロントエンドの場合、ログインしてトークンを取得した後、トークンはキャッシュに保存され、Request Headers リクエストヘッダーに配置されますが、iframe/window.open/a の 3 つのタグを使用して新しいページや新しいウィンドウを開いてリクエストヘッダーを呼び出す方法はありません。このとき、リクエストヘッダーを自分で設定する必要があります。次の 2 つの方法があります。

方法 1 (非推奨):
最初の方法は最も使用されていると言えますが、リンク http:// localhost: 8080/test? Token = 2345treghgfdsd334344 にジャンプした後にトークンを消費し、リンクから新しく開いたページへのリンクから新しいページのリクエスト ヘッドを取得します。利点: URL リンクの背後にあるパラメータを直接スティッチングするため、クロスドメイン状況は発生しません。ページにアクセスし、リクエスト インターセプターで取り出すことはでき
ませ

ここに画像の説明を挿入

方法 2 (推奨):
2 番目の方法は、Cookie を使用することです。現在のページと新しく開かれたページは同じドメイン名に属しているため、Cookie は同じドメイン名にトークンを保存し、新しいページでトークンを取得できます。
欠点: 2 つのシステム a と b は同じドメイン名でのみ Cookie アクセスを使用でき、異なるドメイン名ではクロスドメインの状況が発生します。クロスドメインの問題を解決するには、nginx を介したプロキシ転送を設定する必要があります。
手順:
1. js-cookie 依存関係パッケージをインストールします。

npm install js-cooke

2. トークンを取得した後、Cookie を保存します。

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

3. 新しく開いたページでトークンを取得します。

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

パスワード不要のログインを実現する:
iframe/window.open/a タグを使用して、サードパーティ システムの指定されたページを埋め込むか、開きます。サードパーティの指定したページへのログイン不要のアクセスを実現したい場合は、現在のシステムの Cookie にトークンを格納し、サードパーティ システムが Cookie からトークンを取得してヘッダーに格納することができます。

おすすめ

転載: blog.csdn.net/weixin_42342065/article/details/127420783