Как в компоненте vue показывать кнопку только если ты авторизован в Firebase?

Чтобы показывать кнопку в компоненте Vue только при условии авторизации в Firebase, вам потребуется использовать функциональность авторизации Firebase вместе с директивой v-if.

Вот несколько шагов, которые вам нужно предпринять для реализации:

1. Установите Firebase SDK и настройте его в своем проекте Vue. Вы можете использовать npm для установки или добавить CDN-ссылки на библиотеку Firebase в ваш файл index.html.

2. Импортируйте Firebase в компонент, в котором вы хотите показать кнопку только при авторизации. Затем инициализируйте Firebase с вашими учетными данными. Например:

import firebase from 'firebase/app';
import 'firebase/auth';

// Ваши учетные данные Firebase
const config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  // другие настройки...
};

firebase.initializeApp(config);

3. Создайте computed-свойство, которое будет возвращать true или false в зависимости от того, авторизован ли пользователь в Firebase или нет. Для этого вы можете использовать метод onAuthStateChanged Firebase. Например:

computed: {
  isAuthenticated() {
    return new Promise((resolve, reject) => {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          resolve(true);
        } else {
          resolve(false);
        }
      });
    });
  }
}

4. Теперь вы можете использовать директиву v-if в своем шаблоне для отображения кнопки только при условии, что пользователь авторизован в Firebase. Например:

<template>
  <div>
    <button v-if="isAuthenticated">Кнопка</button>
  </div>
</template>

Теперь кнопка будет показываться только тогда, когда пользователь авторизован в Firebase.

Обратите внимание, что в представленном примере используется асинхронное свойство isAuthenticated, чтобы получить данные о статусе авторизации пользователя. Это необходимо для того, чтобы правильно обновлять представление при изменении статуса авторизации. В противном случае, компонент может отобразиться с устаревшим значением.