行级权限实战总结：从踩坑到精通的技术分享

我的写法，亲测靠谱

行级权限这玩意儿，说白了就是控制用户能看到哪些数据。我在实际项目里用得比较多，今天就来聊聊我是怎么处理的。

首先，我一般会定义一个权限配置文件，比如叫 permissions.js：

const permissions = {
  user: ['view', 'edit'],
  admin: ['view', 'edit', 'delete']
};

export default permissions;

这个文件里定义了不同角色能做的操作。这样做的好处是权限配置和业务逻辑分离，方便维护。

然后在组件里，我会根据用户的权限来决定显示哪些内容。比如我有一个 UserList 组件：

import React from 'react';
import permissions from './permissions';

const UserList = ({ users, currentUser }) => {
  const canEdit = permissions[currentUser.role].includes('edit');
  const canDelete = permissions[currentUser.role].includes('delete');

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          {canEdit && <button>编辑</button>}
          {canDelete && <button>删除</button>}
        </li>
      ))}
    </ul>
  );
};

export default UserList;

这里的关键点是通过 permissions 配置来判断用户是否有权限进行某些操作。这样可以避免在每个组件里都写一堆 if-else 语句，代码更简洁。

这几种错误写法，别再踩坑了

讲完正确的做法，再来看看一些常见的错误写法吧。这些坑我自己也踩过几次，希望你们能避开。

首先是把权限判断写在每个组件里。比如：

const UserList = ({ users, currentUser }) => {
  const isAdmin = currentUser.role === 'admin';

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          {isAdmin && <button>编辑</button>}
          {isAdmin && <button>删除</button>}
        </li>
      ))}
    </ul>
  );
};

这种写法的问题是，一旦权限规则变化，你得去改所有相关的组件。而且这样的代码看起来特别乱，容易出错。

另一种常见的错误是直接在后端返回过滤后的数据。比如：

// 假设这是后端的API
app.get('/users', (req, res) => {
  const users = getAllUsers();
  const filteredUsers = users.filter(user => user.role === req.user.role);
  res.json(filteredUsers);
});

这种方式虽然简单，但问题在于前端无法知道其他用户的存在。如果需要展示一些全局的数据统计或者用户列表时，就会很麻烦。

实际项目中的坑

在实际项目中，行级权限还涉及到很多细节问题。比如说，有时候你需要根据用户的某个属性来决定权限，而不仅仅是角色。这时候我一般会在 permissions.js 里增加一层配置：

const permissions = {
  user: ['view', 'edit'],
  admin: ['view', 'edit', 'delete'],
  special: (user) => user.specialAccess ? ['view', 'edit', 'delete'] : ['view']
};

export default permissions;

这样可以在 special 角色下动态地根据用户属性来决定权限。使用起来也很简单：

const canEdit = permissions[currentUser.role]?.includes('edit') ?? false;
if (typeof permissions[currentUser.role] === 'function') {
  const dynamicPermissions = permissions[currentUser.role](currentUser);
  canEdit = dynamicPermissions.includes('edit');
}

此外，还有一些小坑需要注意。比如权限检查可能会导致性能问题，特别是当用户数量很大时。这时你可以考虑使用缓存或者批量处理来优化。

总结

以上是我总结的一些关于行级权限的最佳实践。当然，每个项目的情况都不一样，可能还有更好的方案。如果你有更好的实现方式，欢迎在评论区交流。

这个技巧的拓展用法还有很多，后续我会继续分享这类博客。希望对你有帮助！