前端权限系统设计

“权限管理”一般在大家的印象中都属于后端的责任，但这两年随着 SPA 应用的兴起，很多应用都采用了前后端分离的方式进行开发，但是纯前端的开发方式就导致，以前很多由后端模板语言硬件解决的问题，现在势必要重新造一次轮子。而如果要重造轮子，前端er 就要根据对应的公司业务需求和后端er 一起配合，基于需求和安全性来考虑，来实现这个动态路由了。

所以考虑到以上的痛点和具体的业务需求。今天我会模拟前端请求后端，获取用户权限，实现RBAC，带你从登录到验证、鉴权，最终实现动态 RBACRABC 的功能。这样一来，你会解决大部分的后台痛点。（这一讲我们用到的技术栈是 vue2.6 + vue-router + vuex + element-ui

那么，我们的实现步骤应该是怎么样的呢？

我们希望在进行页面导航的时候，能先根据登录用户所具有的权限，判断用户是否能访问该页面。

实现可见页面的局部 UI 组件的可使用性或可见性控制，即基于自定义的权限，对比声明的接口或资源是否已经授权。

实现发送请求时，传输 token，对待请求接口进行权限检查，如果用户不具有访问该后端接口的权限，则不发送请求，而是友好地提示用户。