漫谈一下权限设计相关

这里不会介绍具体实现的方式，要根据公司的业务来进行调整，下面就聊一聊基本设计的思路。

权限的设计对于一个后台来讲相当重要，不过也要根据状况来选择，好比咱们不会在一个博客或者我的网站的后台中写上权限控制，由于这是没有必要的，可是对于面向不一样用户的产品来讲就颇有必要了，举个例子来讲，滴滴打车的乘客和车主确定是两个不一样的用户产品，如何管理里面的数据就须要引用权限设计的功能了。

权限设计能够帮助咱们增长信息安全、保证页面的简洁不至于出现误操做的事情，下面就来讲下基本的组成

组成

• 权限

  

  权限这块能够分为页面权限、功能权限和数据权限，页面权限就是指是否能访问当前页面，功能权限对应的则是（增长、删除、修改等），而数据权限则是能够访问的数据范围。

• 角色

  在一个成熟的后台设计中必然要出现角色，这是为了不每新增一个用户就还要从新为他勾选一遍权限，由角色赋值给用户权限，角色这层就至关于一个中间层，同时也方便维护。

• 用户

  每一个用户对应一个帐号，在默认状态下会给予用户一个最小的操做权限，权限的赋值由角色给予，多个角色的权限是能够叠加的。

延伸

上面介绍的其实就是RBAC模型的简单概念，在实际开发中以为至少有如下几点须要注意：

• admin

在开发完成后须要在角色预留一个 admin 或者超级管理员，方便开发人员的维护

• 权限的优先级

上面介绍了权限的组成，可是页面的权限应当是大于操做的权限，只有页面的权限可见，功能的权限才是有意义的

• tips

无权限访问页面、页面不存在、服务器发生错误等方面的提示

最后

最后说一下前端对tips这块的处理 40三、40四、500 的处理思路

500

500 的处理能够经过axions的拦截器来实现，如今后端默认返回的基本格式都是

{
  // 状态码
  status: 200,
  data: {},
  // ...
  }
复制代码

因此判断服务器发生错误，咱们能够直接经过

// 添加请求拦截器
axios.interceptors.request.use(
  function(config) {
    // 在发送请求以前作些什么
    return config;
  },
  function(error) {
    // 对请求错误作些什么，这一步能够直接返回服务器发生错误，方便提示信息的定制
    return Promise.reject(`服务器发生错误`);
  }
);
复制代码

404

404 的实现能够经过router来实现，这里我用的是vue router就以这个举例，假设有一组路由为

const router = new VueRouter({
  routes: [
    {
      path: "/user",
      component: User,
      children: [
        {
          path: "profile",
          component: UserProfile
        },
        {
          path: "posts",
          component: UserPosts
        }
      ]
    },
    {
      path: "/sign",
      component: sign
    }
  ]
});
复制代码

那咱们就经过递归将全部路由拼成一维数组（注意对比的条件，这里我对比的是 path 因此在递归过程当中要将父 path 相加），具体的递归实现取决于你的常见，这里不作演示，以后对比访问的路径存不存在路由信息中，不存在则说明页面不存在返回404

403

403 的实现须要配合后端来实现，通常状况下会请求用户的操做权限会返回当前用户权限所能操做的菜单，以后将能访问的菜单和路由信息对比，若是访问的路径在路由信息中可是不在用户返回的菜单说明没有页面访问的权限。

最后说下为何没有用*的缘由，由于不太好定制，在默认状态下以'/'的形式访问咱们要给予一个用户菜单的第一项，可是若是'/'不存在路由中咱们还要写额外的判断，不如所有本身来自行处理了。

参考

1. 角色权限设计的 100 种解法