如何实现前端的rbac(权限模型）？

Question

业务场景：
同一个登陆页面，管理员和普通用户有不同的用户名和登录密码。登陆之后需要进入不同的home页面，以此类推，导航栏也完全不同。所有UI和功能都不同。也就是说同一套代码，登陆的之后却是不同的网络应用。

问题：

1. 这种设计在开发中会不会有什么不便的地方。比如：这一个代码库跑在localhost:3000上面，那么存储的token也在这个3000 localStorage下面，如果我想要同时开发“普通"用户页面和”admin“页面，那么一个localStorage可能是没有办法重复存储这个token,是不是要先开发”普通“页面，然后登出，然后在登陆”admin“页面，再开发管理员的功能。（只用一个浏览器的情况下）
2. 这种App的最佳实践是什么，是通过某个前端库，比如react-rbac/react-admin或者是通过路由react-router，请大佬指点一下实现这个的基本思路？
3. 这种实践需要后端如何配合？我能想到的就是后端的login response里面，除了token之外，还要有user object，里面包含一个字段“role".除了这个之外还有别的吗？
4. 假如我要为一个客户开发一套app，包含：普通用户前端+管理员前端+后端+移动端。那么请问您是否推荐这种产品架构，或者说，在什么情况下，这种合并普通用户前端+管理员前端的架构比较好，什么情况下不推荐这种架构。
5. 您在开发这种产品的过程中有什么其他的感想吗？

Answer 1

这不是很常见的，后台的场景吗，后台提供提供一个权限列表，动态加载路由，根据角色权限动态添加，你所有的页面都可以开发出来，动态添加路由，不同的角色访问的不一样就行了
，你的第一个token冲突的问题，可以用不同的浏览器或无痕模式进行开发，或者你在开发环境设置不同的端口。

可以看看这些文章更细节：前端 RBAC 权限方案