前端权限控制
根据用户角色来控制用户有使用哪些功能的权限，是很常见的业务问题。这里所说的权限控制，不只是登陆的权限。
从最简单的是否展示相关功能的 UI 来考虑：
- 工作的项目中看到了有同事是根据用户角色，简单写在了 CSS：
display：none,写起来很方便，但安全性太差了。稍微懂点前端，打开控制台就可以绕过这个设定。 - 比上面好些的呢，就是使用条件渲染，不满足条件则不渲染这个组件，控制 dom 结构，安全性比上面的会好些。至少在用户界面上是控制了不能直接使用相关的功能了。
警告
但以上实现方式都是从 UI 层面来说，并没有完全阻止使用该功能的入口。
如果使用第二种方式，安全性也不是很好，权限控制的程度还是不够。假设一种业务场景：非 VIP 用户，不能使用精选歌单功能，如果只是单纯在菜单中不渲染精选歌单菜单，路由中仍然存在这个路由，输入对应的网址仍然可以进入精选歌单页面使用相关功能。
- 路由也根据用户角色设置权限。没有相应页面的权限，相应页面的组件条件渲染，没有该页面的访问权限。
- 最根本的是从接口处设置用户访问权限，使用相关的接口，校验用户的权限，如果不满足相应的条件，接口请求被拒绝，最根本的控制还是在服务器端，前端只是辅助。
前端权限管理的结构
页面权限
- 无需权限 不用拦截，不用登录
- 需要权限
- 根据角色判断权限
以路由划分，渲染路由时拦截，fallback 至 404
功能权限
渲染时，根据是否有功能权限决定是否渲染。 同时后端也要对相应功能的 api 进行限制。
包括菜单、按钮等。
数据权限
与功能权限基本一致，渲染时判断。
前后端分离的场景下，SPA 单页面应用的前端权限方案