时间戳

首页 > 解决方案 > VueJS：页面重定向后如何检索url参数？

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

问题描述

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

我单击“使用 Facebook 登录”按钮，该按钮将调用第三方 url，其中将出现“使用 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 ，但由于页面被重定向，我无法得到这个。

下面是代码示例：


<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 在页面重定向后总是重新加载？如果没有，是否有办法跟踪页面何时被重定向？

标签： javascriptfacebookvue.jsamazon-cognito

解决方案

window.location.searchcontains?后跟 URL 的参数。

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

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

推荐阅读