如何根据表动作列中的用户角色使编辑、删除按钮可见或不可见？

import React from 'react';

const ActionButtons = ({ userRole }) => {
  return (
    <div>
      {userRole === 'admin' && (
        <>
          <button>Edit</button>
          <button>Delete</button>
        </>
      )}
      {userRole === 'editor' && <button>Edit</button>}
    </div>
  );
};

export default ActionButtons;

const express = require('express');
const app = express();

app.use(express.json());

const checkPermission = (req, res, next) => {
  const userRole = req.user.role; // 假设用户角色信息已经通过中间件解析并存储在req.user中

  if (req.path === '/edit' && userRole !== 'admin') {
    return res.status(403).send('Forbidden');
  }

  if (req.path === '/delete' && userRole !== 'admin') {
    return res.status(403).send('Forbidden');
  }

  next();
};

app.get('/edit', checkPermission, (req, res) => {
  res.send('Edit Page');
});

app.get('/delete', checkPermission, (req, res) => {
  res.send('Delete Page');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});