Vue обновление компонента только при наведении на консоль, изменении размера окна и т. Д. c после перенаправления FirebaseUI - PullRequest
Новая
       10

Vue обновление компонента только при наведении на консоль, изменении размера окна и т. Д. c после перенаправления FirebaseUI

0 голосов
/ 12 февраля 2020

Я работаю над Vue (tify) входом в систему с использованием FirebaseUI. Вход происходит в v-диалоге и перенаправляет на страницу «аккаунт». Соответствующий скрипт: 

export default {
  data() {
    let uiConfig = {
      signInSuccessUrl: "/account",
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      ]
    },
    return {
      uiConfig: uiConfig
    }
  }
}

Страница учетной записи, с другой стороны, выглядит следующим образом: 

<template>
  <div v-if="user">{{ user.displayName }}</div>
</template>

<script>
export default {
  data() {
    return {
      user: null
    }
  },
  created() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.user = { displayName: user.displayName };
      }
    });
  }
}
</script>

Мое ожидаемое поведение: я нажимаю один из вариантов входа в систему (скажем, Google ) и он перенаправляет меня на / аккаунт. Затем он отображает div и показывает мое имя пользователя.

Фактическое поведение: после перенаправления страница остается пустой. Страница отображается правильно, когда я открываю ящик, изменяю размер окна или нахожу на консоли разработчика Vue в chrome DevTools.

Я думаю, это потому, что DOM не воспроизводится успешно ... но что бы я ни пытался, я не могу заставить его работать.

Есть идеи?

Ответы [ 2 ]

1 голос
/ 12 февраля 2020

раздел данных в обоих компонентах должен выглядеть следующим образом: 

data() {
    return {
      uiConfig: {
        signInSuccessUrl: "/account",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        ]
      }
    }
  }

data() {
    return {
     user: null
    }
  },
0 голосов
/ 14 февраля 2020

В конце, похоже, проблема в том, как метод SignInSuccessful в FirebaseUI играет с vue -router: не очень хорошо. Чтобы избежать этой проблемы, я вынул метод и добавил обратный вызов, который срабатывает при успешном входе. 

uiConfig: {
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    signInSuccessWithAuthResult: function() {this.$router.push({ path: 'account' })}
  }
},

С этим изменением достигается ожидаемое поведение.

...