权限？
web权限控制一直是网络安全中的一个重要方面，它可以确保只有具有必要权限的用户才能够访问的特定的网页或者功能，从而避免一些恶意的攻击和数据泄露。因为和数据库关联紧密，所以在web系统中通常都是只是后端所控制的。但是随着前后端架构的流行，很多项目的前端也需要进行权限控制。
权限的核心就是在于保护数据，所以后端是权限的关键，去控制某个用户是否能够进行查看、修改等操作。前端权限控制从本质上讲就是控制视图的展示和发送的请求。
那前端去做权限控制有啥意义呢？
降低非法操作的可能性，一个按钮点了可能会失败，但是只要让它不出现就没法点。
减少不必要的请求，减轻服务器压力，没必要的请求， 操作失败的清求， 不具备权限的清求， 应该压根就不需要发送， 请求少了， 自然也会减轻服务器的压力。
提高用户体验，根据用户具备的权限为该用户展现自己权限范围内的内容，避免在界面上给用户带来困扰。
具体到业务场景中是啥样的？
后台系统中常见的权限有以下几种：
菜单权限
登录成功后会得到后端返回的用户身份信息，这些信息中就包含相关的菜单。菜单栏包含哪几项，每一项又有哪些子菜单由其决定。
界面权限
如果用户没有登录，手动在地址栏敲入管理界面的地址，则需要跳转到登录界面。 如果用户已经登录，如果手动敲入非权限内的地址，则需要跳转404界面。
按钮权限
在页面中不乏许多对页面或者页面数据数据的增删改查等操作，没有权限不显示操作按钮或者禁用。
api权限
如果用户通过非常规操作， 比如通过浏览器调试工具将某些禁用的按钮变成启用状态， 此时发的请求， 也应该被前端所拦截。
实现思路
菜单权限
很显然上图左侧的菜单需要权限控制，用于区分哪些菜单(页面)用户可以访问，哪些菜单(页面)用户不可以访问。一般不能访问的菜单(页面)不显示给用户，这样不同的用户登录后显示的左侧菜单是不相同的。
可以从图上看到，一个用户可以对应有多个菜单。那么他在登录后就获得了相应的菜单集合，前端通常把它放入到vuex中或者sessionStorage中，主页根据其中的数据去进行菜单列表渲染。
那如果没有这个菜单的权限然后手动键入这个菜单路由怎么控制呢？ 前端可以通过设置动态路由，根据当前用户所拥有的的权限数据来动态添加所需要的路由，这样在登录成功后拿到菜单数据和所有路由去对比，有就注册，手动键入没有的路由就会跳转到404页面。
对于hash模式路由，后端暂时不知道怎么拦截，获取可以在nginx上做些文章…
按钮权限
上面权限系统控制到了页面，如果页面中不同用户操作按钮（控件）权限需要区分，比如常见的增、删、改操作，还需要进一步权限设计。
在前端怎么去控制一个按钮是否显示呢？ 当然还是得通过后端返回的用户信息里面去找对应的权限字段去判断按钮是否显示。 在vue实现的过程中，可以把该逻辑放到自定义指令中。
对于后端来说，页面列表数据查看、新增、修改、删除等各种操作，都需要通过ajax将数据或参数提交给对应的接口，然后接口再将结果返回，所以我们可以通过限制接口的访问来做到对页面按键功能的控制。 可以把各种按钮也看成是菜单项，对前面的菜单表进行扩充，增加（控件地址、是否显示）两个字段即可。
其中控件地址这个字段，就是我们访问接口数据的路由地址，比如说获取单个订单数据是通过指定主键id，它的路由接口一般设计成"/api/user/:id"。这些路由地址是我们自己设计且在整个项目中都是唯一的。所以在开发时，我们可以在后台做个中间件拦截，通过用户是否有这个菜单项对应的接口路由地址，来判断用户是否有访问该接口的权限。
当系统中用户增多，对每一个用户都需要单独设置权限这种重复劳动工作量增大的时候，势必要考虑用户组了，也就是角色的概念。