为什么在 Vue Router 调度后不正确更新 store 数据？

Question

我在 vue-router 中保护了一些路由，这是通过 vue-router 中路由的元属性来实现的。

当我加载索引路由时，即所有记录都向我显示编辑按钮，因为那时我拥有此权限，如果我更新该用户，我会使用管理员用户转到另一个面板并删除所述权限.现在我转到普通用户并在我的表格的编辑按钮中给出，我应该将我发送到路线 403，因为我当时没有该权限，但它没有，只是到下一个导航到另一条路线我更新了权限。我该如何解决？

router.beforeEach((to, from, next) => {
    store.dispatch('ME'); // get permissions before navigate route
    if (to.matched.some(record => record.meta.permission_name)) {
        // I check if the route permits, otherwise send to route 403
        if(!store.getters.containsPermission(to.meta.permission_name)){
            next({name : '403'})
        }
        else{
            next()
        }
    }
    else{
        next()
    }
})

权限位于后端的数据库中，我使用 Laravel 和 Laravel 权限，通过从另一个管理员用户修改该用户的权限，并执行 store.dispatch('ME'); 我获得了新权限，我认为通过调用在评估元数据之前调度，它将正确到达next({'403'});

希望你理解我，如果不理解，请不要犹豫。

Answer 1

不要在您的商店中设置权限。我，或者像我这样狡猾的人，可以随时为您的应用程序插入完全权限。相反，在每次路由更改之前使用 API 查询它们。

router.beforeEach(async (to, from, next) => {
  try {
    await api.get('permissions', { params: permissions: to.matched.some((record) => record.meta.permission_name }})

    next()
  } catch (e) {
    next({ name: '403 })
  }
})

只需在服务器端处理它。