随着互联网技术的不断发展，越来越多的公司采用前后端分离的架构模式来开发 Web 应用程序。前后端分离能够大大提高开发效率，并且具有良好的可扩展性和可维护性。而且，通过在 API 层面实现权限控制，可以更好地保证系统的安全性。在本文中，我们将介绍如何使用 Hapi.js 实现前后端分离以及路由级权限控制。
Hapi.js 简介
Hapi.js 是一个用于构建 Node.js 后端应用程序的框架。相比于其他框架，Hapi.js 更加注重可读性和可维护性，并且具有完善的插件机制。Hapi.js 支持路由、数据验证、插件、缓存、WebSocket 等功能，是一个非常强大的框架。
前后端分离实现
前后端分离将后端业务逻辑和前端展示逻辑分离开来，在前端展示逻辑和后端业务逻辑之间添加了一个 API 层。前端通过 API 层向后端请求数据，后端响应数据给前端。通过将前后端分离，可以实现更好的可维护性和灵活性。
创建 Hapi.js 服务
我们首先要创建一个 Hapi.js 服务并监听一个端口。代码如下：
-- -------------------- ---- ------- ----- ---- - ---------------------- ----- ------ - --- ------------- ----- ----- ----- ------------ --- ------ -- -- - ----- --------------- ------------------- ------- --- --------------------- -----
运行该代码后，你就可以在 http://localhost:3000 访问我们的 Hapi.js 服务了。
创建 API 接口
接下来，我们来创建一个 API 接口。我们将创建一个 GET /api/todos 接口，用于获取待办事项列表。
-- -------------------- ---- -------
--------------
------- ------
----- -------------
-------- ----- --------- -- -- -
----- ----- - -
- --- -- ----- --- --------- ----- ----- --
- --- -- ----- --- ------- ----- ----- --
- --- -- ----- --- --------- ----- ---- --
--
------ ------
--
---在上面的代码中，我们定义了一个 GET /api/todos 接口，返回一个待办事项列表。我们可以通过在浏览器中访问 http://localhost:3000/api/todos 来测试我们的接口是否正常工作。
前端调用 API
在前后端分离的架构中，前端通过调用 API 来获取数据。下面的示例代码展示了如何使用 Fetch API 来调用我们的 GET /api/todos 接口：
fetch('/api/todos')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));在上面的代码中，我们使用 Fetch API 调用了我们的 GET /api/todos 接口，并打印出了返回的数据。你可以在浏览器的开发者控制台中运行该代码测试接口是否正常工作。
路由级权限控制实现
为了保证系统的安全性，我们需要在 API 层面实现权限控制。使用 Hapi.js 可以很方便地实现路由级别的权限控制。
创建基于角色的权限控制
首先，我们需要创建一个基于角色的权限控制系统。我们将定义两个角色：管理员和普通用户。管理员拥有所有权限，普通用户只能获取待办事项列表。代码如下：
-- -------------------- ---- -------
----- ----- - -
------ ----------
----- ---------
--
----- ----------- - -
------------- -
---- --------- --------
----- ----------
---- ----------
------- ----------
--
--在上面的代码中，我们定义了两个角色 admin 和 user，以及一个权限列表 permissions。每个 API 接口会有一个对应的权限数组，表示哪些角色拥有该接口的哪些请求方式的权限。
使用插件实现权限控制
Hapi.js 提供了一个 hapi-auth-basic 插件用于实现基于用户名和密码的身份验证。我们可以使用该插件来实现基于角色的权限控制。代码如下：
-- -------------------- ---- -------
----- --------------- - -----------------------
----- ---------------------------------
------------------------------ -------- -
--------- ----- --------- --------- --------- -- -- -
-- ------------
----- ------- - -----
----- ----------- - - ----- --------- -------- --
----- --------- - -
----------- --------------------------------------------------
--
-- ---------------
----- ----------- - --------------- -- ---
----- ----------- - - ----- -------- --
----- --------- - - ----------- --
------ - -------- ------------ --------- --
--
---
------------------------------在上面的代码中，我们通过注册 hapi-auth-basic 插件来实现身份验证。然后，我们使用 server.auth.strategy 函数来定义一个名为 simple 的策略，该策略使用基本身份验证 ('basic') 和 validate 函数来验证用户身份。在 validate 函数中，我们根据用户名和密码验证用户，并设置相应的凭据和工件。在我们的示例代码中，我们模拟了不同角色的权限。
最后，我们使用 server.auth.default 函数将 simple 策略设置为默认策略，表示所有的路由都将使用该策略进行身份验证。
设置路由权限
创建完基于角色的权限控制系统后，我们需要将其应用到具体的路由上。代码如下：
-- -------------------- ---- -------
--------------
------- ------
----- -------------
------- -
----- -
------- -
------ ------------------------------
--
--
-------- ----- --------- -- -- -
----- ----- - -
- --- -- ----- --- --------- ----- ----- --
- --- -- ----- --- ------- ----- ----- --
- --- -- ----- --- --------- ----- ---- --
--
------ ------
--
--
---在上面的代码中，我们将 auth 设置为在该路由上应用的身份验证配置。我们使用 access 属性来指定哪些角色可以访问该路由。在示例代码中，我们使用 permissions['/api/todos'].GET 来指定只有拥有 GET /api/todos 接口权限的角色才能访问该路由。
测试路由权限
我们可以通过浏览器和 API 请求来测试路由权限是否正常工作。对于拥有权限的访问，路由将返回待办事项列表。对于没有权限的访问，路由将返回 401 状态码和错误信息。
总结
在本文中，我们介绍了如何使用 Hapi.js 实现前后端分离和路由级权限控制。使用 Hapi.js 可以很方便地实现前后端分离，并且可以使用插件和路由配置来实现路由级权限控制，保证系统的安全性。我们希望这篇文章可以对前端开发人员提供一些实用的指导。完整示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64663db6968c7c53b06dd658