VueRouter甚至在調用Vue.beforeCreate函數之前更改路由

Question

我是vue.js的新手，我在初始化路由器時遇到問題。

當用戶點擊'/'時，如果用戶已經登錄，我想重定向到'/ home'，否則將他重定向到'/ login'。成功登錄後，我將訪問令牌保存在localStorage中。每當用戶重新訪問頁面時，我都會從localStorage中獲取令牌並在我的vuex存儲中進行設置並相應地重定向他。

但問題是即使用戶已經登錄，它總是重定向到'/登錄'頁面。在設置令牌存儲之前，路由器的調用已經被執行。

以下是我的代碼。請讓我知道我該如何解決這個問題。

//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

那麼，沒有理由必須在beforeCreate中添加令牌，是嗎？您根本不訪問Vue實例，只能使用localStorage和商店。

所以，只要做到這一點，你甚至可以創建路由器。

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

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