VueJS：页面重定向后如何检索url参数？答案

【问题标题】：VueJS: How to retrieve url parameters after the page is redirected?VueJS：页面重定向后如何检索url参数？
【发布时间】：2019-12-11 17:09:29
【问题描述】：

我在我的 VueJS 应用程序中使用第三方服务通过 Facebook (AWS Cognito) 执行登录。

我单击“使用 Facebook 登录”按钮，该按钮将调用第三方 url，其中将出现 Sign Up with Facebook 提示。

例如。


window.location.href = https://my-cognito-app-domain/oauth2/authorize?response_type=token&client_id=my_client_id&redirect_uri=my_redirect_url&identity_provider=Facebook

用户将输入他/她的 Facebook 凭据以进行身份验证。

身份验证成功后，用户将重定向回 VueJS 应用程序，并附加 access_token 作为 url 参数

例如。 https://my-app-example.com/#access_token=eyJraWQiOiIyRHViM0VrY2 ...

我正在尝试在我的 VueJS 应用程序的上下文中获取 access_token 对其执行一些逻辑。（解码 jwt 等）

我曾尝试在 App.vue 中使用 window.location.search 当应用程序 mounted 并 created 时，但由于页面是重定向我无法得到这个。

下面是代码示例：


<template>
  <div id="app">

  </div>
</template>

<script type="text/javascript">
  // @ is an alias to /src
import Navigation from '@/components/Navigation.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'home',
  components: {
    Navigation,
    Footer
  },
  created(){
    console.log("created")
    var params = window.location.hash
    console.log(params)

  },
  mounted(){
      console.log("mounted")
      var params = window.location.hash
      console.log(params)
  }

}

我希望在页面重定向回 VueJS 应用程序后立即获得 access_token。我是否正确地说 App.vue 在页面重定向后总是重新加载？如果没有，是否有办法跟踪页面何时重定向？

【问题讨论】：

你需要location.hash； location.search 包含以 ? 开头的常规查询字符串。

标签： javascript facebook vue.js amazon-cognito

【解决方案1】：

window.location.search 包含 ? 后跟 URL 的参数。

由于重定向链接不包含? 而是#，您应该使用而是 window.location.hash，其中包含 #，后跟 URL 的其余部分。

参考：https://developer.mozilla.org/en-US/docs/Web/API/Location#Properties

【讨论】：

页面重定向时好像连console.log("created") 和console.log("mounted")都没有记录，谢谢建议