प्रवेश Vuex राज्य जब Vue-रूटर मार्गों को परिभाषित करने

Question

मैं निम्नलिखित Vuex दुकान (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') 

मैं भी है निम्नलिखित मार्गों Vue-रूटर के लिए परिभाषित (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 } 
] 

मैं इसे बनाने के लिए इतना है कि अगर Vuex दुकान के user वस्तु authenticated संपत्ति झूठी है, रूटर है लॉग इन पृष्ठ पर उपयोगकर्ता अनुप्रेषित कोशिश कर रहा हूँ।

मैं इस है:

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

समस्या मैं कैसे beforeEach समारोह अंदर से Vuex दुकान के user वस्तु का उपयोग करने की नहीं जानता है।

मुझे पता है कि मेरे पास BeforeRouteEnter का उपयोग कर घटकों के अंदर राउटर गार्ड तर्क हो सकता है, लेकिन यह प्रत्येक घटक को अव्यवस्थित करेगा। मैं इसके बजाय राउटर स्तर पर इसे केंद्रीय रूप से परिभाषित करना चाहता हूं।

Answer 1

जैसा कि here सुझाया गया है, आप अपने स्टोर को उस फ़ाइल से निर्यात करना और routes.js में आयात करना चाहते हैं।

आप एक 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 

अब में routes.js, आप कर सकते हैं:

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() 
    } 
}) 

मुख्य हैं। जेएस भी आप store आयात कर सकते हैं:

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

Vue.use(Vuex) 

import store from './store.js' 

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

Answer 2

मैं main.js से बाहर और दुकान/index.js में दुकान चलती समाप्त हो गया है, और router.js फ़ाइल में आयात:

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

यह मैं कैसे यह करने के लिए होता है।

App.vue में, मैं कुकी पर एक वॉचर रखूंगा जो प्रमाणीकरण विवरण संग्रहीत करता है। (जाहिर है, मैं प्रमाणीकरण के बाद कुकी के रूप में प्रमाणीकरण विवरण युक्त एक टोकन संग्रहीत करता हूं)

अब जब भी यह कुकी खाली हो जाती है, तो मैं उपयोगकर्ता को/लॉगिन पृष्ठ पर रूट कर दूंगा। लॉग आउट आउट कुकी को हटा देता है। अब अगर उपयोगकर्ता लॉग आउट करने के बाद वापस हिट करता है, तो चूंकि कुकी मौजूद नहीं है, (जिसके लिए उपयोगकर्ता को लॉग इन करने की आवश्यकता है), उपयोगकर्ता को लॉगिन पृष्ठ पर भेजा जाएगा।