Headless CMS 如何应对用户权限管理？

随着前端技术的不断发展，Headless CMS（无头 CMS）已经成为了越来越多网站和应用的首选。Headless CMS 与传统 CMS 最大的区别在于前者不负责渲染页面，而是将数据以 API 的形式提供给前端，让前端自行处理数据展示。这样的优势在于前端可以更加灵活地控制展示效果，而且不受 CMS 本身的限制。但是，这种架构也带来了一个新的问题：用户权限管理。

用户权限管理的意义

用户权限管理是指对系统中不同用户的访问权限进行控制，保证用户只能访问其有权访问的资源。在 Headless CMS 中，用户权限管理尤其重要，因为前端可以直接访问 CMS 中的数据，如果没有权限控制，那么用户可以随意访问所有数据，甚至修改和删除数据，这是非常危险的。

Headless CMS 中的用户权限管理方案

Headless CMS 中的用户权限管理方案有很多，这里介绍两种比较常见的方案。

方案一：使用 CMS 本身的权限管理功能

很多 CMS 都有自己的用户权限管理功能，可以对用户进行角色分配，然后对角色进行权限控制。在 Headless CMS 中，可以通过 API 来调用 CMS 的权限管理功能，然后在前端根据用户的角色来控制用户的权限。

以 Strapi 为例，可以创建不同的用户角色，然后对角色进行权限控制，如下所示：

// www.javascriptcn.com code example
// 创建用户角色
strapi.plugins['users-permissions'].models.role.create({
  name: 'admin',
  permissions: [
    {
      action: 'plugins::content-manager.explorer.create',
      subject: 'application::article.article'
    },
    {
      action: 'plugins::content-manager.explorer.read',
      subject: 'application::article.article'
    },
    {
      action: 'plugins::content-manager.explorer.update',
      subject: 'application::article.article'
    },
    {
      action: 'plugins::content-manager.explorer.delete',
      subject: 'application::article.article'
    }
  ]
});

// 查询用户角色
const roles = await strapi.plugins['users-permissions'].models.role.find();

// 查询用户角色的权限
const permissions = await strapi.plugins['users-permissions'].models.permission.find({
  role: roles[0].id
});

在前端中，可以根据用户的角色来控制用户的权限，如下所示：

if (user.role === 'admin') {
  // 允许操作
} else {
  // 禁止操作
}

方案二：使用第三方认证和授权服务

另一种方案是使用第三方认证和授权服务，如 Auth0、Okta 等。这些服务通常提供了完善的用户认证和授权功能，可以方便地集成到 Headless CMS 中。在这种方案中，用户首先需要在认证服务中进行认证，然后认证服务会颁发一个访问令牌（access token），前端通过这个访问令牌来访问 Headless CMS 中的数据。在 Headless CMS 中，可以使用中间件来验证访问令牌的有效性，并根据访问令牌中包含的用户信息来判断用户是否有权访问数据。

以 Auth0 为例，可以使用 Auth0 的 Node.js SDK 在 Headless CMS 中验证访问令牌，如下所示：

// www.javascriptcn.com code example
const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

const client = jwksClient({
  jwksUri: 'https://your-auth0-domain.auth0.com/.well-known/jwks.json'
});

function getKey(header, callback) {
  client.getSigningKey(header.kid, function(err, key) {
    const signingKey = key.publicKey || key.rsaPublicKey;
    callback(null, signingKey);
  });
}

function verifyToken(token, callback) {
  jwt.verify(token, getKey, function(err, decoded) {
    if (err) {
      callback(err);
    } else {
      callback(null, decoded);
    }
  });
}

function middleware(req, res, next) {
  const token = req.headers.authorization?.split(' ')[1];
  if (!token) {
    res.status(401).send('Unauthorized');
    return;
  }
  verifyToken(token, function(err, decoded) {
    if (err) {
      res.status(401).send('Unauthorized');
    } else {
      req.user = decoded;
      next();
    }
  });
}

在前端中，可以在每次请求 API 时带上访问令牌，如下所示：

fetch('/api/articles', {
  headers: {
    Authorization: `Bearer ${accessToken}`
  }
});

小结

用户权限管理是 Headless CMS 中必不可少的一部分，需要根据实际情况选择合适的方案。如果 CMS 本身提供了完善的权限管理功能，可以直接使用 CMS 的功能；如果 CMS 的权限管理功能不够强大，或者需要和其他系统集成，可以考虑使用第三方认证和授权服务。无论采用哪种方案，都需要注意安全性，保证用户只能访问其有权访问的资源。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d3479ea941bf7134632f80