平平无奇的角色权限设计

背景

自从盘古开天辟地以来，人们就有各种各样的需求，到了如今，竟然还会有角色权限设计这种需求。通俗的说，角色权限就是不同的角色登录网站会显示不同的页面，因此他们能交互的操作就不相同，就会产生区别，体现出所谓的“权限”。

实现思路

当用户登录成功后，后台会返回用户的信息，如果这个项目中需要角色权限的设计，这些信息中就包含此用户可用的权限信息，即能操作的页面。

我们通过对路由进行设计，来实现角色权限的管理

将路由分为静态路由及动态路由，静态路由是指所有的角色都可以访问的路由，而动态路由则是根据权限信息给角色分配的可使用路由，我们根据动态路由的不同，显示的组件就不同，就可以实现对角色的权限管理。

看图。

比如管理员和普通用户之间就会存在权限上的差别，具体示例看下图

代码演示

const createRouter = () => new Router({
  routes: [...constantRoutes, ...asyncRoutes]
})

constantRoutes存放静态路由的路由信息，asyncRoutes存放动态路由的路由信息

通过this.$router.options.routes可以获取到路由的配置信息，来进行组件的显示

这就很平平无奇，相信还有很多更好的实现方法，期待大佬指正。