定义 Vue-Router 路由时访问 Vuex 状态

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 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 }
]

我正在努力做到这一点，如果 Vuex 存储 user 对象，并且它的 authenticated 属性设置为 false ，则路由器重定向用户到登录页面。

我有这个：

 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 在组件内部设置路由器保护逻辑，但这会使每个组件混乱。我想在路由器级别集中定义它。

原文由 Ege Ersoz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

正如 这里 所建议的，您可以做的是从它所在的文件中导出您的商店，然后在 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()
    }
})

在 main.js 中，您也可以导入 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')

原文由 Saurabh 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 router.app 访问路由器注入的根 Vue 实例，然后通过 router.app.$store 定期访问存储。

 const router = new Router({
    routes,
})

router.beforeEach((to, from, next) => {
    // access store via `router.app.$store` here.
    if (router.app.$store.getters('user')) next();
    else next({ name: 'login' });
})

这是 API 参考。

视图 3

router.app 在 Vue 3 中被删除，但您仍然可以在使用路由器时添加它，如 迁移指南 中所述：

 app.use(router)
router.app = app

原文由 Hafez Divandari 发布，翻译遵循 CC BY-SA 4.0 许可协议