VueJS: Umleitung zwischen zwei Seiten

Question

Ich benutze Firebase mit VueJS (und VueRouter).

Ich habe ein Problem mit der Umleitung. Ich möchte zwischen zwei Seiten umleiten. Die erste Seite wird für die Authentifizierung und die zweite für Inhalte verwendet, die nur für angemeldete Benutzer sichtbar sein sollen.

Mein Zustand hält die Feuerbasis Benutzerschlüssel (die durch eine Mutation bevölkert wird, die Feuerbasis ruft):

state: { 
    user: { key: null } 
} 

Die Authentifizierung Seite diese Zeilen:

beforeCreate() { 
    if (this.$store.state.user.key !== null) { 
    this.$router.replace('/') 
    } 
} 

Und die geheime Seite diese:

beforeCreate() { 
    if (this.$store.state.user.key === null) { 
    this.$router.replace('/new') 
    } 
} 

Aber: die Umleitung von der Authentifizierungsseite auf die geheime Seite findet nicht statt.

Meine Vue-dev-tools zeigen an, dass der Benutzerschlüssel gesetzt ist.

Was könnte die Lösung für dieses Problem sein?

EDIT:

Dies ist die Mutation ist, die Firebase nennt und setzt der Benutzer-Schlüssel:

updateSession(state) { 
    auth.onAuthStateChanged((user) => { 
    if (user) { 
     state.user.key = user.uid 
    } 
    }) 
} 

Hier ist die Aktion:

UPDATE_SESSION({ commit }) { 
    commit('updateSession') 
} 

Ich nenne die Aktion in Meine Wurzelkomponente (App.vue):

beforeCreate() { 
    this.$store.dispatch('UPDATE_SESSION') 
} 

EDIT 2:

Jetzt Array meine Routen:

routes: [ 
    { path: '/', component: Secret }, 
    { path: '/new', component: Authentication } 
] 

Answer 1

Werfen Sie einen Blick auf die Per-Strecke Guards Sektion der docs: https://router.vuejs.org/en/advanced/navigation-guards.html

Sie möchten vielleicht etwas versuchen wie unten. Indem du den BeforeEnter-Wächter auf die Route setzt, sagst du Vue, dass du das zuerst tun sollst. Das Argument next teilt VueRouter mit, was als nächstes zu tun ist, und kann bei Bedarf umleiten oder auf der ursprünglichen Route weitermachen.

beforeEnter(to, from, next) { 
    if (this.$store.state.user.key === null) { 
    next('/new') 
    } 
} 

EDIT

Sie sieht auch mit push statt replace

Answer 2

Gemäß dem Gespräch, das wir in den Kommentaren hatte wünschen können, um zu versuchen, wie Sie diese benötigen:

store.dispatch können handle Promise, das vom ausgelösten Aktionshandler zurückgegeben wird, und gibt auch Promise zurück. Siehe docs.

So können Sie Setup der meldet sich ein Versprechen wie dieses retirn:

a_logInUser: ({state, commit}, userInput) => { 
    return new Promise((resolve, reject) => { 
     firebase.auth().signInWithEmailAndPassword(userInput.email, userInput.paswword); 
     resolve(); 
    }); 
} 

Dann in Ihrer Authentifizierungsseite, wo tale Sie die Login-Eingabedaten und klicken Sie auf den Login-Button, setzen Sie diese als Click-Handler auf Ihre Login-Button

loginUser(){ 
    this.$store.dispatch('a_logInUser', {email: this.email, password: this.password}) 
     .then((result) => { 
      this.$router.replace('/'); 
      }, (err) => { 
       // stay on this pageS 
       //handle login error     
     }); 
    } 
}