Das ist mein Routenwächter:
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() } });
Das Problem ist, dass ich, obwohl ich „await“ in der Versandmethode verwendet habe, nicht den Statuswert der Berechtigungen erhalten habe, der ursprünglich leer warDies ist der Code des Vuex-Stores:
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: {} }
Bitte helfen Sie mir, dieses Problem zu lösen, danke!
在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("从服务器获取不到任何数据。提示用户检查网络连接并重试") }) }}
此外，当没有权限匹配时，您调用相同的路由，这样会一直调用相同的路由并造成无限循环。 如果权限被拒绝，请重定向到访问被拒绝的页面。