如何從重定向的 url 獲取查詢數據

Question

我有一個卡支付返回一個重定向 URL 的響應。我必須在支付初始化后重定向用戶。 我這樣做使用：

...
 window.location.href = response.data.meta.authorization.redirect

要在我無法控制的頁面上驗證付款。

驗證后，我的請求中有一個重定向 URL，它將用戶重定向（瀏覽器重定向）到我的應用程序，查詢數據如下所示：

http://account.localhost.com/deposit/card?response=%7B"id"%3A1499407,"txRef"%3A"tUhElMQhoC"...,

我需要 url 中的 ID 來驗證付款並隨后更新我的數據庫。

我怎樣才能用 Vue 做到這一點？

Answer 1

您可以使用URL API檢索response參數中的 json，然后解析它並從結果 object 中獲取 ID。

 const str = `http://account.localhost.com/depositcard?response=%7B"id"%3A1499407,"txRef"%3A"tUhElMQhoC"%7D` const json = new URL(str).searchParams.get('response') const obj = JSON.parse(json) console.log(obj.id)

Answer 2

使用 Vue-router，您可以使用this.$route.query獲取查詢參數，然后訪問特定參數： this.$route.query.id

由於 ID 在字符串化的 JSON object 中，您必須先解析它： JSON.parse(this.$route.query.response).id

因此，通過重定向，訪問created的生命周期掛鈎中的數據是有意義的：

created() {
    console.log(JSON.parse(this.$route.query.response).id);
}