后端和前端共享CASL库的用户授权

const { AbilityBuilder, Ability } = require('@casl/ability');
const express = require('express');

const app = express();

// 定义授权规则
const defineAbilitiesFor = (user) => {
  const { can, cannot, build } = new AbilityBuilder(Ability);

  if (user.role === 'admin') {
    can('manage', 'all');
  } else {
    can('read', 'posts');
  }

  return build();
};

app.get('/posts', (req, res) => {
  const user = req.user; // 假设从请求中获取用户信息
  const ability = defineAbilitiesFor(user);

  if (ability.can('read', 'posts')) {
    // 执行读取操作
    res.json({ posts: [] });
  } else {
    res.status(403).json({ message: 'Forbidden' });
  }
});

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

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { AbilityBuilder, Ability } from '@casl/ability';

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    const fetchPosts = async () => {
      try {
        const response = await axios.get('/posts', { withCredentials: true });
        setPosts(response.data.posts);
      } catch (error) {
        console.error(error);
      }
    };

    fetchPosts();
  }, []);

  return (
    <div>
      {posts.map((post) => (
        <div key={post.id}>{post.title}</div>
      ))}
    </div>
  );
};

export default App;