关于vue路由权限控制

Question

一般像这种前后端分离的框架，前端控制路由菜单，思路是什么样子的？

1.前端路由表配置用户组：【'admin','user'】,然后登录根据后台返回的role的角色，分配相应的菜单路由；
2.前端登录，发送用户信息，后台直接返回配置好的菜单信息，根据菜单信息动态生成菜单路由；

然后有一个问题，上面的关于路由权限的相关信息，为了持久化存储，直接存储在本地，那么如果用户直接修改本地存储所存放的路由权限信息，那么岂不是可以获取原本不属于他的权限了吗，那么该如何解决这种问题呢？

Answer 1

你可以看一下RBAC的一些实现，前端控制一些菜单、路由以及按钮的权限不应该按用户的角色来，而是按照权限来，角色是权限的一个集合，而且角色是可以编辑和增删的。
比如说用户管理功能我可以初始化对应user-opr,user-view这个两个权限，分别对应用户操作和查看功能（具体按需求细分），当用户有view这个权限就表明他可以看到用户管理的菜单，用户管理的页面可以看到并操作查看按钮，这跟他是哪个角色无关，只要这个用户的某一个角色包含user-view这个权限就可以了。所以对于你的问题：
1.菜单不应该根据角色分配；
2.可以后台返回，也可以前端维护完整的菜单tree，根据用户的权限来筛选当前用户的菜单tree；
3.放到localStrorage里面也可以，也可以放到vuex或者redux中管理，权限后端也是要校验的，只有前端校验没有意义，毕竟可以绕过前端直接通过接口请求后端数据。

Answer 2

后端接口应该会有验证吧？实在担心安全性就不能存在本地

Answer 3

前端配置好所有路由，后端返回用户拥有的菜单，在路由拦截中根据菜单控制用户能否访问