這是我的路由守衛：
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("从服务器获取不到任何数据。提示用户检查网络连接并重试") }) }}
此外，當沒有權限匹配時，您會呼叫相同的路由，這樣會一直呼叫相同的路由並造成無限循環。 如果權限被拒絕，請重新導向至存取被拒絕的頁面。