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

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

在 ma​​in.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')

Answer 2

我最终将 store 从 main.js 移到 store/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 中，我将在存储身份验证详细信息的 cookie 上保留一个观察程序。 （显然我会在身份验证后将包含身份验证详细信息的令牌存储为 cookie）

现在，只要这个 cookie 变空，我就会将用户路由到 /login 页面。注销会删除 cookie。现在如果用户退出后回击，现在由于cookie不存在（需要用户登录），用户将被路由到登录页面。

Answer 4

将您的位置状态与应用程序的其他状态分开管理可能会使这样的事情变得比他们可能需要的更难。在处理了 Redux 和 Vuex 中的类似问题之后，我开始使用router 模块管理我的位置状态inside 我的 Vuex 商店。您可能想考虑使用这种方法。

在您的具体情况下，您可以观察 Vuex 存储本身内的位置何时发生变化，并分派适当的“重定向”操作，如下所示：

dispatch("router/push", {path: "/login"})

将位置状态作为 Vuex 模块进行管理比您想象的要容易。如果您想尝试一下，可以使用我的作为起点：

https://github.com/geekytime/vuex-router

Answer 5

我发现当使用保护 router.beforeEach 时，我在 router.py 中无法使用商店，但是通过更改 守卫到 router.beforeResolve，然后 store 可用。

我还发现，通过在守卫 router.beforeEach 中等待 store 的导入，我就能够成功使用 router.beforeEach。我在 router.beforeResolve 代码下方提供了一个示例。

因此，为了使我的示例与 OP 的问题相似，以下是它对我的工作方式。我正在使用 vue-router 3.0.2 和 vuex 3.1.0。

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store';  //or use a full path to ./store 

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

const router = new VueRouter({
   routes  //es6
 })

router.beforeResolve((to, from, next) => {
    const user = store.state.user.user;  //store with namespaced  modules
    if (to.matched.some(record => record.meta.requiresLogin) && user.isLoggedIn) {
       next() //proceed to the route
    } else next("/login")  //redirect to login

})

export default router;

我还发现我可以通过在 beforeEach 守卫中等待加载存储来让 router.beforeEach 工作。

router.beforeEach(async (to, from, next) => {
  const store = await import('@/store');  //await the store 
  const user = store.state.user.user;  //store with namespaced modules
  if (to.matched.some(record => record.meta.requiresLogin) && user.isLoggedIn) {
  ....  //and continue as above
});

Answer 6

将商店导入为@Saurabh 建议的作品。但是恕我直言，它会给您的代码带来某种变通方法的味道。

它可以工作，因为 Vuex 存储是一个单例。导入它会在您的组件、路由器和商店之间创建一个硬链接依赖关系。至少它使单元测试变得更加困难。 vue-router 解耦并像这样工作是有原因的，遵循其建议的模式并保持路由器与实际存储实例解耦可能会有所回报。

查看 vue-router 的源代码，很明显有一种更优雅的方式可以从路由器访问 store，例如在beforeRouteEnter守卫：

beforeRouteEnter: (to, from, next) => {
  next(vm => {
    // access any getter/action here via vm.$store
    // avoid importing the store singleton and thus creating hard dependencies
  })
}

2020 年 9 月 10 日编辑（感谢 @Andi 指出）

使用beforeRouteEnter 保护取决于具体情况。我马上看到以下选项：

1. 在 mixin 中声明防护并在需要它的组件中选择性地使用它，而不是在全局防护中过滤所需的组件
2. 在全局 mixin 中声明守卫（注意声明的特殊性，例如需要在 Vue.use(VueRouter); 之后声明：here 和 here）

Answer 7

我发现vuex-router-sync 是最简单的解决方案。从他们的网站：

它将一个路由模块添加到存储中，其中包含表示当前路由的状态

Answer 8

您可以使用router.app 访问路由器注入的根Vue 实例，然后通过router.app.$store 定期访问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 Reference。

Vue 3

router.app 已在 Vue 3 中删除，但您仍然可以在使用路由器时添加它，如migration guide 中所述：

app.use(router)
router.app = app