这是我的路由守卫：
router.beforeEach(async (to, from, next) => {
await store.dispatch('GetPermission');
if (to.matched.some(record => record.meta.requireAuth)) {
let permissions = store.state.permissions; //获取到的是空值
console.log(permissions);
if (permissions.filter(per => (per.name === 'read_list').length != 0)) {
next({
path: '/dashboard/create'
})
} else {
next()
}
} else {
next()
}
});
问题在于，尽管我在dispatch方法中使用了await，但我没有获取到最初为空的permissions的状态值 这是vuex store的代码：
GetPermission(context) {
axios.defaults.headers.common['Authorization'] = 'Bearer ' + context.state.token
axios.get('http://127.0.0.1:8000/api/user').then((response) => {
console.log(response)
context.commit('Permissions', response.data.permission)
})
}
//mutation:
Permissions(state, payload) {
state.permissions = payload
}
//state
state: {
error: '',
token: localStorage.getItem('token') || null,
permissions: '',
success: '',
isLoggedin: '',
LoggedUser: {}
}
请帮我解决这个问题，谢谢！
在Vuex中，操作是异步的。让调用函数（操作的发起者）知道操作完成的唯一方法是通过返回一个Promise并稍后解析它。
这里有一个例子：myAction返回一个Promise，进行一个http调用，并在稍后异步地解析或拒绝Promise。
actions: { myAction(context, data) { return new Promise((resolve, reject) => { // 在这里执行一些操作... 比如使用vue-resource进行http调用 this.$http("/api/something").then(response => { // http成功，调用mutator并在状态中更改一些内容 resolve(response); // 让调用函数知道http完成了。你可以发送一些数据回去 }, error => { // http失败，让调用函数知道操作没有成功 reject(error); }) }) }}
现在，当你的Vue组件启动myAction时，它会得到这个Promise对象，并且可以知道它是否成功。下面是Vue组件的一些示例代码：
export default { mounted: function() { // 这个组件刚刚创建。让我们在这里使用一个操作来获取一些数据 this.$store.dispatch("myAction").then(response => { console.log("获取到了一些数据，现在让我们在这个组件中显示一些东西") }, error => { console.error("从服务器获取不到任何数据。提示用户检查网络连接并重试") }) }}
此外，当没有权限匹配时，您调用相同的路由，这样会一直调用相同的路由并造成无限循环。 如果权限被拒绝，请重定向到访问被拒绝的页面。