时间戳

首页 > 解决方案 > VueJs auh0 社交认证，如何自定义处理重定向

vue.js - VueJs auh0 社交认证，如何自定义处理重定向

问题描述

使用 VueJs 开发工具包。

我的重定向 url 是 example.com/callback，在路由内部我有回调组件，它假设将用户数据发送到后端并检查用户是否存在并登录用户，否则创建新用户并从我们的后端应用程序中取回 jwt。

问题如下，在创建/安装周期内我无法访问 auth0Client 等用户属性。

this.$auth.auth0Client

我必须做这个黑客

const interval = setInterval(async () => {
    count++;
    if (this.$auth.auth0Client) {
        clearInterval(interval);
        let loggedUser = await this.$auth.auth0Client.getUser();
        if(loggedUser) {
          const email = loggedUser.email;
          const name = loggedUser.name;
          try {
              //backend logic
          } catch(e) {
              console.log(e)
          }
        }
    } else {
        if (count > 80) {
            clearInterval(interval);
        }
      }
}, 100)

我的问题/问题是如何更好地处理这个问题，因为它看起来不是很合乎逻辑和很好。我想将经过身份验证的用户数据发送到我们的后端并在那里完成剩下的工作，

Auth0 似乎缺少此类用例的详细信息

谢谢

标签： vue.jsauth0

解决方案

我通过使用 Vue 事件系统解决了我自己的问题

this.auth0Client = await createAuth0Client({
    domain: options.domain,
    client_id: options.clientId,
    audience: options.audience,
    redirect_uri: redirectUri,
    responseType: 'token'
  });
  this.$eventBus.$emit('auth0Client',this.auth0Client) // creating event here after auth0Client

在回调组件中处理它

 this.$eventBus.$on('auth0Client', async (auth0Client) => { 
  //logic here
 })

不要忘记在主 js 中注册您的事件总线

 Vue.prototype.$eventBus = new Vue();

希望它会有所帮助

推荐阅读