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: [ 
    // ...