漫谈一下权限设计相关

1,126 阅读4分钟

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

权限的设计对于一个后台来说至关重要,不过也要根据情况来选择,比如我们不会在一个博客或者个人网站的后台中写上权限控制,因为这是没有必要的,但是对于面向不同用户的产品来说就很有必要了,举个例子来说,滴滴打车的乘客和车主肯定是两个不同的用户产品,如何管理里面的数据就需要引用权限设计的功能了。

权限设计可以帮助我们增加信息安全、保证页面的简洁不至于出现误操作的事情,下面就来说下基本的组成

组成

  • 权限

    权限这块可以分为页面权限、功能权限和数据权限,页面权限就是指是否能访问当前页面,功能权限对应的则是(增加、删除、修改等),而数据权限则是可以访问的数据范围。

  • 角色

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

  • 用户

    每个用户对应一个账号,在默认状态下会给予用户一个最小的操作权限,权限的赋值由角色给予,多个角色的权限是可以叠加的。

延伸

上面介绍的其实就是RBAC模型的简单概念,在实际开发中觉得至少有以下几点需要注意:

  • admin

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

  • 权限的优先级

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

  • tips

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

最后

最后说一下前端对tips这块的处理 403、404、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 种解法