VueRouter ändert die Route noch vor dem Aufruf der Vue.beforeCreate Funktion

Question

Ich bin neu bei vue.js und habe Probleme mit der Initialisierung des Routers.

Wenn der Benutzer auf '/' klickt Ich möchte zu '/ home' umleiten, wenn der Benutzer sich bereits angemeldet hat, leiten Sie ihn auf '/ login' um. Bei erfolgreicher Anmeldung speichere ich das Zugriffstoken in localStorage. Immer wenn der Benutzer die Seite erneut besucht, hole ich das Token von localStorage und setze es in meinen vuex Store und leite ihn entsprechend um.

Aber das Problem ist, selbst wenn der Benutzer bereits angemeldet ist, es immer auf '/ Login' Seite umleiten. Der Aufruf an den Router wird ausgeführt, bevor das Token im Speicher gesetzt wird.

Unten ist mein Code. Bitte lassen Sie mich wissen, wie ich das lösen kann.

//main.js 
import Vue from 'vue'; 
import Vuetify from 'vuetify'; 
import App from './App'; 
import { store } from './store'; 
import router from './router'; 

Vue.use(Vuetify); 
Vue.config.productionTip = false; 


/* eslint-disable no-new */ 
new Vue({ 
    el: '#app', 
    store, 
    router, 
    template: '<App/>', 
    components: { App }, 
    beforeCreate() { 
    const token = localStorage.getItem('userToken'); 
    this.$store.dispatch('autoSignInToken', token); 
    } 
}); 

//router.js 
import Vue from 'vue'; 
import Router from 'vue-router'; 
import Login from '@/components/User/Login'; 
import Hello from '@/components/Hello'; 
import AuthGuard from './auth-guard' 

Vue.use(Router); 

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     redirect: '/home', 
    }, 
    { 
     path: '/login', 
     name: 'Login', 
     component: Login, 
     beforeEnter: AuthGuard 
    }, 
    { 
     path: '/home', 
     name: 'Home', 
     component: Hello, 
     beforeEnter: AuthGuard, 
    }, 
    ], 
}); 

//auth-guard.js 
import {store} from '../store' 

export default (to, from, next) => { 
    if (store.getters.user) { 
    if(to.fullPath === '/login') { 
     next('/home'); 
    } else { 
     next(); 
    } 
    } else { 
    if(to.fullPath !== '/login') { 
     next('/login'); 
    } else { 
     next(); 
    } 
    } 
} 

Answer 1

Nun, es gibt keinen Grund, dass Sie das Token in beforeCreate überhaupt hinzuzufügen haben, oder? Sie greifen überhaupt nicht auf die Vue-Instanz zu, Sie arbeiten nur mit localStorage und dem Store.

So tun Sie es, bevor Sie sogar den Router erstellen.

const token = localStorage.getItem('userToken'); 
store.dispatch('autoSignInToken', token); 

export default new Router({ 
    routes: [ 
    // ...