《看完就懂系列》项目中的权限管理复杂吗？_前端权限的复杂性-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42557996/article/details/112532610

这是大冰块2021年第5篇原创文章，和大冰块一起在前端领域努力吧！！！💪

写在前面

还记得在我入门没多久的时候，第一次接触公司中大型项目的时候，项目权限这块把我搞的很懵。大概是我的逻辑思维不够强大，猛然接触新的思维方式老是转不过弯来。不过功夫不负有心人，靠着前辈的指导和自己一点点摸索，总算对权限的整体流程（前端方面）有了一个基本的掌握。

如今回首再看，前端方面的权限管理其实没什么难度，就像一把钥匙开一把锁，只要把一一对应的逻辑关系做好就可以了。因为思路是相似的，所以实现的代码都是大同小异，因此本文主要以文字和逻辑图为主。

今天就来谈一下 项目权限 这一块，尽量谈的简单一些，让前端小白都能明白，同时也详细说下 权限管理禁止允许 的思路，欢迎大家一起讨论更好的方法，也希望抛砖引玉，能有大神来指出不足与更好的改进方法。😜

什么是权限管理

简单来说，就是不同的用户具有不同的权限：

用户A进入页面，页面内有增加，查找两个选项，

用户B进入页面，页面内有增加，查找，修改，删除四个选项，

用户C进入页面，页面提示权限不足，3秒后将跳转首页

那么如果我们有100个用户，难不成要给他们搞100套权限吗？？？

当然不是，用户并不直接对应权限，用户对应的其实是角色 。

也就是说：用户对应角色，角色对应权限。如果我们有一百个用户，但是他们等级不同，老板有全部的权限，经理有80%权限，组长有50%权限，职员有20%权限。

那么其实我们只需要4个角色：老板角色 有全部的权限，经理角色 有80%权限，组长角色 有50%权限，职员角色 20%权限。

用户只要对应这4个角色即可，不同级别的用户就能有不同的权限了。

值得注意的是：

用户和角色的对应可以是单对多的 ，一个用户可以有多个角色，比如用户小明是经理，但他可能临时兼职一个组长，所以他对应的角色是经理+组长。

角色和权限的对应也是单对多的 ，一个角色不一定只有一个权限，这个角色可能具有全部的权限（增删改查等），也可能只有一部分权限（增删）。

上面的说明可以改成这样：

用户A进入页面，用户A对应的角色是职员，所有职员角色进入页面，页面内都会有增加，查找两个选项，

用户B进入页面，用户B对应的角色是组长，所有组长角色进入页面，页面内都会页面内有增加，查找，修改，删除四个选项，

用户C进入页面，用户C没有对应的角色，没有对应角色的用户进入页面，页面都会提示权限不足，3秒后将跳转首页

权限管理的逻辑图

文字说明可能有不到位的地方，下面我们来用流程图的形式来更直观的表现一下权限管理的逻辑。

★页面权限逻辑图

在路由拦截中判断当前用户是否具有对应的页面路由权限。

★功能权限逻辑图

在页面渲染前，判断当前用户是否具有当前页面某功能的权限，决定是否渲染。

后端要对权限做二次鉴权处理，避免页面渲染错误或者缓存问题，导致功能权限显示，从而误操作。

★数据权限共享逻辑图

数据权限共享本质上是新加了一个临时角色，把临时角色加给被分享者即可。

同时，临时角色应当记录自身创建时间，过期时间，分享者ID以及被分享者的ID，方便后期统计溯源。

权限管理的代码实现

代码实现一般是通过路由拦截与请求拦截共同实现，因为不同的项目代码结构可能有所不同，所以如下代码只是思路的一个延展说明，并不能直接拷贝到项目中使用哦~

 // 路由拦截

 // name 要前往的路由
 // access 用户权限数组
 // routes 路由列表
 const canTurnGo = (name, access, routes) => {
	const routePermission = (list) => {
		return list.some(item => {
			if (item.children && item.children.length) {
				return routePermission(item.children)
			} else if (item.name === name) {
				return hasAccess(access, item)
			}
		})
	}
	return routePermission(routes)
 }
 ...
 
 // 请求拦截
 // 在拦截到http状态码非200时调用的方法
 const errorHandler = function(error) {
    const codeMap = {
        200: '服务器成功返回请求的数据',
        201: '新建或修改数据成功',
        202: '一个请求已经进入后台排队（异步任务）',
        204: '删除数据成功',
        400: '发出的请求有错误，服务器没有进行新建或修改数据的操作',
        401: '用户没有权限（令牌、用户名、密码错误）',
        403: '用户得到授权，但是访问是被禁止的',
        404: '发出的请求针对的是不存在的记录，服务器没有进行操作',
        406: '请求的格式不可得',
        410: '请求的资源被永久删除，且不会再得到的',
        422: '当创建一个对象时，发生一个验证错误',
        429: '请求次数超出当天上限',
        500: '服务器发生错误，请检查服务器',
        502: '网关错误',
        503: '服务不可用，服务器暂时过载或维护',
        504: '网关超时',
    }
    const {response} = error
    if (response) {
        // 获取http状态码对应的错误信息
        const errorText = codeMap[response.status] || response.statusText
        // 如果某个状态码要执行特殊操作，则：
        if(status === 403){
            throw new Error(errorText)
        }else{
            throw new Error(errorText)
        }
    } else {
        notification.error({
            description: '您的网络发生异常，无法连接服务器',
            message: '网络异常',
        })
    }
    return
}

总结

类似于这种权限管理，最重要的还是考虑问题的思路，有了正确的思路转化为代码就很容易了。

按照权限-角色-用户的管理方式，后期权限的维护以及增删改查都可以放在前端来处理，后端只要配置一次就可以不再操作了。避免了后端代码在权限管理的逻辑杂乱，不好维护等问题。简单来说，每个权限都有一个唯一的id，用户登录后去判断用户对应的角色是否对应有某权限的id，作为判断用户是否具有某权限的标准。如果新增一个页面，里面有n个功能权限，只需把路由地址以及加入到路由权限表中，把n个功能权限添加到功能权限表中，再给角色分配对应权限即可。

这种公共的权限管理，每个项目根据不同的需求都有自己的处理方式。另外，权限管理也可以做成公共的组件，新建项目时引入配置即可，此处暂不做讨论了。