前端构建BFF层创建业务中间后端逻辑架构

原创

lyushine

修改于 2024-12-06 17:01:23

15100

代码可运行

文章被收录于专栏：Web行业观察Web行业观察

运行总次数：0

代码可运行

BFF层的作用

BFF层的主要作用包括：

数据聚合：将来自多个后端服务的数据聚合成前端需要的格式。
协议转换：将后端服务的RESTful API或GraphQL API转换为前端更易用的接口。
缓存：对频繁请求的数据进行缓存，减少对后端服务的压力。
认证和授权：处理用户的认证和授权逻辑，确保前端请求的安全性。
错误处理：统一处理后端服务返回的错误，提供友好的错误提示。

选择BFF框架

在搭建BFF层时，选择一个合适的框架非常重要。以下是一些常用的BFF框架：

Node.js + Express/Koa：适合小型项目或团队，易于上手。
NestJS：基于TypeScript，适合大型项目，提供丰富的功能和良好的扩展性。
Spring Cloud Gateway：适合Java生态，提供强大的路由和过滤功能。
Kong：适合微服务架构，提供API管理和插件系统。

我们以Node.js + Express为例，详细介绍如何搭建BFF层。

安装Node.js和npm

在开始之前，确保你的计算机上已经安装了Node.js和npm。你可以从Node.js官方网站下载并安装最新版本。安装完成后，可以通过以下命令检查Node.js和npm的版本：

node -v
npm -v

创建项目目录

首先，创建一个新的项目目录，并进入该目录：

mkdir bff-project
cd bff-project

初始化项目

在项目目录中，运行以下命令来初始化一个新的npm项目：

npm init -y

这将会创建一个package.json文件，其中包含了项目的配置信息。

安装Express

接下来，我们需要安装Express框架。通过以下命令安装：

npm install express --save

创建BFF服务

在项目目录中创建一个index.js文件，并编写以下代码：

// index.js
const express = require('express');
const app = express();
const port = 3000;

// 模拟从后端服务获取数据
const getDataFromBackend = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ data: 'Hello from backend!' });
    }, 1000);
  });
};

// 定义BFF接口
app.get('/api/data', async (req, res) => {
  try {
    const data = await getDataFromBackend();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

// 启动服务
app.listen(port, () => {
  console.log(`BFF service is running on http://localhost:${port}`);
});

运行BFF服务

在项目目录中运行以下命令来启动BFF服务：

node index.js

这将会启动一个本地服务器，你可以在浏览器中访问http://localhost:3000/api/data来查看BFF接口的响应。

集成认证和授权

为了确保前端请求的安全性，我们可以在BFF层集成认证和授权逻辑。以下是一个简单的示例，使用JSON Web Token（JWT）进行认证：

npm install jsonwebtoken --save

然后在index.js中添加以下代码：

// index.js
const jwt = require('jsonwebtoken');

// 模拟用户认证
const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];

  if (!token) return res.sendStatus(401);

  jwt.verify(token, 'secretKey', (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

// 定义BFF接口
app.get('/api/data', authenticateToken, async (req, res) => {
  try {
    const data = await getDataFromBackend();
    res.json(data);
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' });
  }
});

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

后端