Vue. JS Перенаправление Firebase при успешной авторизации - PullRequest
Новая
       19

Vue. JS Перенаправление Firebase при успешной авторизации

0 голосов
/ 13 июля 2020

У меня следующая структура приложения Vue. js (sr c каталог): 

.
├── App.vue
├── assets
├── data
│   ├── config.js
├── main.js
├── router.js
└── views
    └── app
        ├── index.vue
        ├── main
        │   ├── dashboard.vue
        │   └── index.vue
        ├── sessions
        │   ├── index.vue
        │   ├── login.vue

Я уже реализовал аутентификацию Firebase, которая отлично работает (ссылаясь на data / config. js). В моем login. vue у меня есть форма входа и кнопка отправки: 

<b-form @submit.prevent="formSubmit">
...
<b-button
   type="submit"
...

, которая выполняет метод formSubmit: 

<script>
...
  methods: {
    formSubmit() {

      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(data => {
          this.$router.push('/app/main/dashboard').catch((err) => {
            throw new Error(`${err}`);
          });
        })
        
        .catch(err => {
          console.log("not successful")
          this.error = err.message;
          alert(err.message);
        });

    },
  },
...
</script>

Как сказано , аутентификация работает, я просто не получаю перенаправление на стартовую страницу при успешной аутентификации для работы. Используя приведенный выше код, я получаю 

Uncaught (in promise) Error: undefined

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

Спасибо!

Ответы [ 2 ]

0 голосов
/ 16 июля 2020

У меня почему-то не работает. Теперь я поместил signInWithEmailAndPassword в export default new Vuex.Store в магазине / индексе. js: 

// Create store
export default new Vuex.Store({
  modules: {
    largeSidebar,
    compactSidebar,
    chat,
    config,
    authData,
    invoice,
    cart,
    verticalSidebar,
    scrumboard
  },
  actions: {
    signInWithEmailAndPassword({ commit, dispatch }, payload) {
      return firebase
      .auth()
      .signInWithEmailAndPassword(payload.email, payload.password)
      .then(data => {
        return Promise.resolve(data);
      })
      .catch(err => {
        console.log("not successful")
        this.error = err.message;
        return Promise.reject(err);
      });
    }


  }
});

но снова получил vue-router.esm.js?8c4f:2089 Uncaught (in promise) undefined

0 голосов
/ 13 июля 2020

Я думаю, у вас должно быть все в порядке: 

<script>
...
  methods: {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(data => {
          this.$router.push('/app/main/dashboard');
        })
        .catch(err => {
          console.log("not successful")
          this.error = err.message;
          alert(err.message);
        });
}
...
</script>

Вы не можете вызвать catch на this.$router.push. Возможно, вы могли бы обернуть его в блок try and catch: 

try {
  this.$router.push('/app/main/dashboard');
} catch (error) {
  console.log(error) 
}

Но я сомневаюсь, что это будет иметь смысл, поскольку маршрут будет изменен, если он доступен или нет. Я бы предложил создать резервную страницу с ошибкой. Как уже упоминалось здесь .

Vuex подход:

Создайте файл index. js внутри папки магазина. 

import * as firebase from 'firebase'; 

   export const state = () => ({})
    
    export const actions = {
       signInWithEmailAndPassword({ commit, dispatch }, payload) {
        return firebase
        .auth()
        .signInWithEmailAndPassword(payload.email, payload.password)
        .then(data => {
          return Promise.resolve(data);
        })
        .catch(err => {
          console.log("not successful")
          this.error = err.message;
          return Promise.reject(err);
        });
       }
    }

, а затем в вашем компоненте формы: 

    <script>
...
  methods: {
    formSubmit() {
      this.$store.dispatch("signInWithEmailAndPassword", { email: this.email, password: this.password } )
      .then(data => {
          this.$router.push('/app/main/dashboard');
      });
    }
  }, ...
</script>
...