Zugreifen Vuex Zustand bei der Definition Vue-Router Routen

Question

Ich habe folgende Vuex Speicher (main.js):

import Vue from 'vue' 
import Vuex from 'vuex' 

Vue.use(Vuex) 

//init store 
const store = new Vuex.Store({ 
    state: { 
     globalError: '', 
     user: { 
      authenticated: false 
     } 
    }, 
    mutations: { 
     setGlobalError (state, error) { 
      state.globalError = error 
     } 
    } 
}) 

//init app 
const app = new Vue({ 
    router: Router, 
    store, 
    template: '<app></app>', 
    components: { App } 
}).$mount('#app') 

I haben auch die folgenden Routen definiert, für Vue-Router (routes.js):

import Vue from 'vue' 
import VueRouter from 'vue-router' 

Vue.use(VueRouter) 

//define routes 
const routes = [ 
    { path: '/home', name: 'Home', component: Home }, 
    { path: '/login', name: 'Login', component: Login }, 
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true } 
] 

ich versuche, es zu machen, so dass, wenn das user des Vuex Speicherobjekt hat authenticated Eigenschaft falsch ist, haben sie den Router die Benutzer auf die Login-Seite umleiten.

Ich habe dies:

Router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresLogin) && ???) { 
     // set Vuex state's globalError, then redirect 
     next("/Login") 
    } else { 
     next() 
    } 
}) 

Das Problem ist, ich weiß nicht, wie der user Objekt Vuex-Speichers zuzugreifen aus dem Innern der Funktion before.

Ich weiß, dass ich die Router guard Logik innerhalb Komponenten kann BeforeRouteEnter verwenden, aber das würde jede Komponente verunstaltet. Ich möchte es stattdessen zentral auf der Router-Ebene definieren.

Answer 1

Wie vorgeschlagen here, was Sie tun können, ist Ihr Geschäft aus der Datei zu exportieren, die es ist, und importieren Sie es in routes.js. Es wird so etwas wie folgt sein:

Sie haben eine store.js:

import Vuex from 'vuex' 

//init store 
const store = new Vuex.Store({ 
    state: { 
     globalError: '', 
     user: { 
      authenticated: false 
     } 
    }, 
    mutations: { 
     setGlobalError (state, error) { 
      state.globalError = error 
     } 
    } 
}) 

export default store 

Jetzt in routes.js, können Sie haben:

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import store from ./store.js 

Vue.use(VueRouter) 

//define routes 
const routes = [ 
    { path: '/home', name: 'Home', component: Home }, 
    { path: '/login', name: 'Login', component: Login }, 
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true } 
] 

Router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresLogin) && ???) { 
     // You can use store variable here to access globalError or commit mutation 
     next("/Login") 
    } else { 
     next() 
    } 
}) 

In main. js auch können Sie importieren store:

Answer 2

Ich landete bewegt den Laden aus main.js und in store/index.js, und in die router.js-Datei importieren:

import store from './store' 

//routes 

const routes = [ 
    { path: '/home', name: 'Home', component: Home }, 
    { path: '/login', name: 'Login', component: Login }, 
    { path: '/secret', name: 'Secret', component: SecretPage, meta: { requiresLogin: true } 
]  

//guard clause 
Router.beforeEach((to, from, next) => { 
    if (to.matched.some(record => record.meta.requiresLogin) && store.state.user.authenticated == false) { 
     store.commit("setGlobalError", "You need to log in before you can perform this action.") 
     next("/Login") 
    } else { 
     next() 
    } 
}) 

Answer 3

Dies ist, wie ich es wäre.

In App.vue werde ich einen Beobachter auf Cookie halten, die Authentifizierungsdaten speichert. (Natürlich würde ich speichern Sie eine Token-Authentifizierungsdaten als Cookie nach der Authentifizierung enthält)

Nun, wenn dieses Cookie leer wird, ich routet den Benutzer/Login-Seite. Abmelden löscht den Cookie. Wenn der Benutzer jetzt nach dem Abmelden zurückkehrt, wird der Benutzer jetzt, da der Cookie nicht existiert (der Benutzer muss angemeldet sein), zur Anmeldeseite weitergeleitet.