前端不建议拥有权限控制，因为是不可靠的。。

权限系统一定是单独的一个系统，不耦合在业务系统里。
对于sidebar，tabbar等较大的权限范围由前端和权限系统交互得出是否展示给用户。
对于最小粒度的每一个action由后端和权限系统交互决定是否能执行此业务逻辑。
前端路由肯定不是写死的，而是从权限系统问来的。

控制全部交给后台处理。
第一次登录的时候，使用用户信息生成token返回给客户端。
token的安全性由后台处理，前端拿到的数据都认为是正确的，不对权限做控制。
前端每次请求后台接口，都将token带入。由后台验证token的正确性，并且返回相应的结果。
用标准的restful api就可以了。

同意@小翼做法是对的，你说的手动修改了有什么关系，就算用户能通过一些方式进入到本来进入不了的页面，当在那个页面想要获取到一些数据或者一些操作还是要通过这个token值，而这个token值用户是破解不了的，他只是单纯的进入了一个空页面而已页面

vue路由有meta字段，可以用来存储可访问此路由的角色，但是这样的话，你的菜单需要根据路由动态生成而不是写死在页面上。

完整的前端权限控制可以参考这个项目：https://github.com/tower1229/...

权限由后端控制才是安全的 前端只能做一些辅助判断
看你的问题的我建议你们后台权限分两套：页面权限和数据权限
进入一个页面或路由 首先请求判断是否有页面的权限，有了页面的权限再请求数据，后台会更具token来判断返回相应的结果 没有权限统一根据401中的错误码来做对应的展示
这样做就可以很好的应对 当用户手动修改本地数据或url访问到他不应该访问的页面了

首先 权限功能是由后台实现的，我们的目标是如何在复杂权限系统的前端体现出权限的概念

我的做法是前端路由全部存数据库，每个前端路由下绑定该路由需要访问的api，通过前端的管理界面实现 前端和后端权限的绑定。用户登录时获取有权限的前端路由动态注册

由此实现了界面上大到路由，小到一个按钮的任何权限管控(按钮也存后端)，既无权限也不显示ui，比如某一个路由没权限，后端也不会返回该路由，导致前端没有这条路由

然后又通过路由表关联的api实现了每打开一个前端页面可以自动请求该页面下的api 自己同步后端的接口验证到前端，后端修改接口验证，前端自动更改等等一系列功能，手机打字太累不再赘述，感兴趣沟通我

首先，肯定只能是后端权限起作用
其次，对每个涉权操作，都要进行鉴权后才响应，这一步不能省，否则会乱套的。

前端权限相关字段仅仅是为了优化UI，并不具有实际的权限管理作用，只有这样才能保证权限系统是稳定的。

权限由后端控制，前端只需要根据后端的返回结果判断是否有权限，或者是否有数据来进行友好的呈现

可以参考下这个回答