多用户电子相册系统如何保护用户图片

// 后端API端点

// 用户上传图片的接口
app.post('/upload', function(req, res) {
  // 验证用户访问令牌
  if (req.headers.authorization !== 'Bearer ' + accessToken) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  // 保存图片到以用户ID命名的文件夹中
  const uploadPath = 'uploads/' + userID + '/' + req.file.originalname;
  req.file.mv(uploadPath, function(err) {
    if (err) {
      return res.status(500).json({ error: err });
    }
    res.status(200).json({ message: 'Image uploaded successfully' });
  });
});

// 用户获取图片的接口
app.get('/images', function(req, res) {
  // 验证用户访问令牌
  if (req.headers.authorization !== 'Bearer ' + accessToken) {
    return res.status(401).json({ error: 'Unauthorized' });
  }

  // 根据用户ID获取用户的图片路径
  const imagePaths = getImagesByUserID(userID);

  // 返回图片路径给前端
  res.status(200).json({ images: imagePaths });
});

<!-- 前端vue组件 -->

<template>
  <div>
    <h1>Your Images</h1>
    <ul>
      <li v-for="image in images" :key="image.id">
        <img :src="getImageURL(image.path)" />
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  mounted() {
    // 获取用户的图片数据
    this.fetchImages();
  },
  methods: {
    fetchImages() {
      // 发送API请求获取用户的图片数据
      // 注意要附带访问令牌
      axios.get('/images', {
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      })
        .then(response => {
          this.images = response.data.images;
        })
        .catch(error => {
          console.error(error);
        });
    },
    getImageURL(path) {
      // 构建图片的完整URL
      return `/path/to/images/${path}`;
    }
  }
};
</script>