在 Vue 路由器中处理回调 url

Posted 2023-03-09

【中文标题】在 Vue 路由器中处理回调 url

【英文标题】：Handle callback urls in Vue router

【发布时间】：2017-01-15 09:20:22

【问题描述】：

我使用 Stamplay 作为 BaaS，所以为了验证用户，我只是重定向到

/auth/v1/auth0/connect

之后，用户进行身份验证.. Stamplay 调用我的应用程序

/login/callback?jwt=abc.123.xyz

Stamplay 调用我的应用后如何验证用户身份？

试过

我试试我的路由器配置..

'/login/callback': 
  component: Vue.extend(
    ready() 
      // ...  THIS IS NOT CALLED!! NEVER
      console.log('... ready .. ')
      console.log(this.$route.query.jwt)
    
  )

【问题讨论】：

如果是关于获取查询参数，请参考：router.vuejs.org/en/route.html 并查看通常如何在 vue.js 中实现身份验证。这是一篇好文章：auth0.com/blog/build-an-app-with-vuejs。现在，在您的情况下，您的登录组件始终可以使用它在查询参数中接收到的值并存储在本地存储中，并在您的应用中设置身份验证标志。

嗨@Deepak，本文使用lock 形式，在我的情况下，我调用外部url 来验证用户并使用/login/callback?jwt=xyz 调用我

所以，当调用我的 Vue 应用程序（使用 URL /login/callback?jwt=xyz）时，我需要执行我的代码...以捕获查询字符串并设置身份验证

【参考方案1】：

尝试从组件内访问this.$route.query.jwt。

【讨论】：

是的，还有哪里？ :) 你能提供一个 JSFiddle 吗？您可以在组件中访问它，例如在 ready 事件中

如@Deepak 评论中所述，请检查router.vuejs.org/en/route.html。它声明“路由对象将作为 this.$route 注入到启用 vue-router 的应用程序中的每个组件中”，this.$route.query.jwt 应该包含您从 Stamplay 获得的 jwt 的值

嗨@kartsims，抱歉耽搁了。是的。 this.$router 被注入到每个组件中。但是，如何在路由器中捕获？看看我编辑的问题。

好的，但是小提琴会真的帮助我在这里帮助你

我创建了一个github repo..github.com/Ridermansb/vuex-router-auth0-example

【参考方案2】：

您好，我认为您的路由器配置中将有一个用于/login/callback 的view 组件。你需要的是当这个组件被激活时，触发一些功能吧？

所以在上面的视图组件中，你有data，methods，你可以尝试这样做：

//your component
'/login/callback': 
  component: Vue.extend(
  data()
    return 
    
  ,
  methods: ,
  route: 
    activate()
      console.log('... ready .. ')
    
  

【讨论】：

跟随错误。 vue.common.js?e881:2611 [Vue warn]: Failed to mount component: template or render function not defined.