需求背景

根据项目不同，场景也不一致。以常规后台管理系统为例，一般根据角色来区分权限，常见的角色往往有超级管理员，普通用户，游客等。根据角色对应的权限使得前端页面有不一样的展现形态。

那如何在代码层面做好更好的架构设计呢？

前端虽然可以做一些权限控制，前端的权限判断往往可以通过本地篡改越权等破解，所以更保险的方案肯定是后端返回。前端更理想的权限控制就是接受后端返回的权限数据，将数据注入应用中，再对页面的导航及具体展现内容来进行把控。前端来保证用户体验，后端来保证数据安全

关于前端的权限控制有哪些呢

• 登录页面权限

  登录页面一般是不需要任何权限的，前端会在路由中来进行权限配置；vue提供了路由守卫；react可以通过自己封装一个AuthRoute组件来控制。这两种都可以通过将后端返回的菜单数据来进行整理控制，如果当前访问路由需要登录权限，则会被重定向去指定页面如登录页

• 整体页面权限

  后端返回的方案，让前端可以模糊角色的概念，可以只需要关注permissionList，来控制每个单页面的访问权限，而不需要关注用户本身的角色，因为已经拿去后端处理了

• 部分权限控制

  部分页面权限是在整体页面权限下，想使用颗粒度更小的权限控制，例如内容模块的权限，操作按钮CURD的权限等，不过也可以同上来进行控制

问题

动态导航菜单的实现

其他方案

阿里云Policy 语法