Tidak dapat logout pengguna di firebase saat dia menutup halaman

Saya sedang mengembangkan program ERP di vue/firebase. Masalah saya adalah: Saya harus mengeluarkan pengguna ketika dia menutup browser atau halaman yang menjalankan program.

Saya mencoba menggunakan setPersistence, seperti dokumen di sini: https://firebase.google.com/docs/auth/web/auth-state-persistence ; tapi itu terus mengembalikan kesalahan atribut yang tidak terdefinisi seperti di sini:

[Vue warn]: Error in created hook: "TypeError: Cannot read property 'Persistence' of undefined"
(found in Root)
warn                    @   vue.esm.js?efeb:628
logError                @   vue.esm.js?efeb:1893
globalHandleError       @   vue.esm.js?efeb:1888
handleError             @   vue.esm.js?efeb:1848
invokeWithErrorHandling @   vue.esm.js?efeb:1871
callHook                @   vue.esm.js?efeb:4228
Vue._init               @   vue.esm.js?efeb:5017
Vue                     @   vue.esm.js?efeb:5094
eval                    @   main.js?3479:46
(anonymous)             @   build.js:2965
__webpack_require__     @   build.js:679
fn                      @   build.js:89
(anonymous)             @   build.js:2803
__webpack_require__     @   build.js:679
(anonymous)             @   build.js:725
(anonymous)             @   build.js:728

dan juga bahwa:

TypeError: Cannot read property 'Persistence' of undefined
    at Vue.created (main.js?3479:51)
    at invokeWithErrorHandling (vue.esm.js?efeb:1863)
    at callHook (vue.esm.js?efeb:4228)
    at Vue._init (vue.esm.js?efeb:5017)
    at new Vue (vue.esm.js?efeb:5094)
    at eval (main.js?3479:46)
    at Object.<anonymous> (build.js:2965)
    at __webpack_require__ (build.js:679)
    at fn (build.js:89)
    at Object.<anonymous> (build.js:2803)

Seperti yang saya katakan sebelumnya, saya menggunakan vue.js untuk mengembangkan solusi, dan meletakkannya pada fungsi create() di main.js, inilah kode saya:

import FirebaseVue  from './firebase/index'
import Vue                  from 'vue'
import App                  from './App.vue'
import router           from './router'
import money                                                    from 'v-money'
import Vuelidate                                            from 'vuelidate'
import { BootstrapVue, IconsPlugin,LayoutPlugin,ModalPlugin,CardPlugin,VBScrollspyPlugin,DropdownPlugin, TablePlugin}   from 'bootstrap-vue'
import { library }                                      from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon }                      from '@fortawesome/vue-fontawesome'
import { VueMaskDirective }                     from 'v-mask'
import { 
    faTimesCircle,
    faPlusCircle,
    faCoffee,
    faHome,
    faLogout,
    faSignOutAlt,
    faEdit,
    faUpload,
    faDollarSign,
    faTimes,
    faClock,
    faCheck,
    faChevronLeft,
    faChevronRight,
    faArrowCircleLeft,
    faArrowCircleRight,
} from '@fortawesome/free-solid-svg-icons'

library.add(faTimesCircle,faPlusCircle,faCoffee,faHome,faSignOutAlt,faEdit,faUpload,faDollarSign,faTimes,faClock,faCheck,faChevronLeft,faChevronRight,faArrowCircleLeft,faArrowCircleRight)

Vue.component('font-awesome-icon', FontAwesomeIcon)
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.use(LayoutPlugin)
Vue.use(ModalPlugin)
Vue.use(CardPlugin)
Vue.use(VBScrollspyPlugin)
Vue.use(DropdownPlugin)
Vue.use(TablePlugin)
Vue.use(FirebaseVue)
Vue.use(require('vue-moment'));
Vue.use(money, {precision: 4})
Vue.use(Vuelidate)

new Vue({
  router,
  render: h=>h(App),
  created(){
        
        this.$firebase.auth().setPersistence(this.$firebase.auth.Auth.Persistence.SESSION),
        this.$firebase.auth().onAuthStateChanged( user => {
        let id_cliente = localStorage.getItem('id_cliente');
        let firebase     = this.$firebase.firestore();
            if (user) {
            
            firebase.collection('sessoes_usuarios')
            .doc(id_cliente).update({status:true})
            .then(
                console.log('usuário logado com sucesso')
            ).catch((e)=>{
                console.log(e);
                console.log('não possui log de sessão')
            });

            } else {
                
                firebase.collection('sessoes_usuarios')
                .doc(id_cliente).update({status:false})
                .then(
                    console.log('usuário deslogado com sucesso')
                ).catch((e)=>{
                console.log(e);
                console.log('não possui log de sessão')
            });

            }        
        })
  }
}).$mount('#app')

Berikut isi folder firebase/index.js:

import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/storage'
import 'firebase/firestore'

export const firebaseApp = firebase.initializeApp({
  apiKey:             xxx,
  authDomain:         xxx,
  databaseURL:        xxx,
  projectId:          xxx,
  storageBucket:      xxx,
  messagingSenderId:  xxx,
  appId:              xxx      
})

export default function install (Vue) {
  Object.defineProperty(Vue.prototype, '$firebase', {
    get(){
      return firebaseApp
    }
  })
}

Apakah saya melewatkan sesuatu?


person lucas menezes    schedule 23.07.2020    source sumber
comment
Di Stack Overflow, tolong jangan tampilkan gambar teks. Salin teks ke dalam pertanyaan sehingga mudah dibaca, disalin, dan dicari.   -  person Doug Stevenson    schedule 23.07.2020
comment
@DougStevenson Oke, saya baru di tumpukan. Terima kasih atas sarannya! Aku sedang berubah sekarang!   -  person lucas menezes    schedule 23.07.2020
comment
Bisakah Anda memberikan info lebih lanjut tentang apa itu this.$firebase dan firebase (misalnya di firebase.collection('sessoes_usuarios')) dan juga membagikan konten /firebase/index flie   -  person Renaud Tarnec    schedule 23.07.2020
comment
@RenaudTarnec Kami menggunakan 'ini.$firebase' karena kami memiliki direktori dengan kredensial dan metode firebase yang diimpor. Jadi ketika kita memanggil firebase kita harus melakukannya seperti pemanggilan fungsi vue. Saya akan mengedit direktori firebase/index. firebase.collection('sessoes_usuarios') adalah koleksi yang dibuat untuk mengontrol siapa yang login atau tidak saat ini, itu hanya seperti pengelola status bagi kami.   -  person lucas menezes    schedule 23.07.2020
comment
Dan Anda tidak menggunakan FirebaseVue dari import FirebaseVue from './firebase/index'? Jadi, apakah this.$firebase.auth().onAuthStateChanged terpicu?   -  person Renaud Tarnec    schedule 23.07.2020
comment
@RenaudTarnec Ya, dengan ini.$firebase.aut().onAuthStateChanged dipicu secara normal, tetapi saya tidak dapat melakukan hal yang sama dengan setPersistence() sepertinya saya melewatkan sesuatu karena ada pengembalian 'tidak terdefinisi' di beberapa milik saya percobaan. Jadi masalah saya adalah ketika pengguna menutup halaman web dia tetap masuk. Jika ada cara lain untuk melakukan itu saya akan sangat berterima kasih   -  person lucas menezes    schedule 23.07.2020


Jawaban (1)


Saya menemukan kesalahannya, masalahnya adalah saya tidak mengimpor perpustakaan auth:

import 'firebase/auth'

Saya tidak menerima log kesalahan apa pun sebelumnya.

person lucas menezes    schedule 27.07.2020