我有以下 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
在组件内部设置路由器保护逻辑,但这会使每个组件变得困惑。我想改为在路由器级别集中定义它。
最佳答案
按照建议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()
}
})
在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')
关于javascript - 定义 Vue-Router 路由时访问 Vuex 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42603909/