从Vue Router分发后,为什么不正确更新存储数据?

时间:2019-06-03 02:06:07

标签: vue.js vuex vue-router

我在vue-router中保护了一些路由,这是通过vue-router中的路由的meta属性来完成的。

当我加载索引路由时,即所有记录都向我显示编辑按钮,因为那时候我拥有此权限,如果更新该用户,则与管理员用户一起转到另一个面板,并删除该权限。现在,我转到普通用户,然后输入表格的编辑按钮,我应该将我发送到路线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'});

希望您能理解我,如果没有,请不要犹豫,发表评论。

1 个答案:

答案 0 :(得分:0)

请勿在您的商店中放置权限。我或其他像我一样狡猾的人可以在需要时为您的应用程序插入完整权限。相反,在每次更改路由之前,请使用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 })
  }
})

然后在服务器端处理它。