Net-front-gateway NPM

Net-Front-Gateway

基于 Service Worker 拦截全站 Resource、API 等 NetWork 请求的前端类网关
由于 Service Worker 安全策略，仅支持 localhost/127.0.0.1 和 https 协议的 Web 服务

流程示意图

示例中 Demo 位于本项目 web 目录中, 需通过 VSCode LiveServer 插件启动
本项目仅实现 service worker 功能，APISIX 服务端部分不在此配置实现

1. 适用场景（需满足如下）

a. 不同的业务应用或系统访问渠道收敛到统一平台下访问
b. 不同的业务应用或系统通过Nginx代理等统一域名访问
c. 不同的业务应用或系统通过Web端网页方式进行访问

2. 使用方式

a. 拷贝如下文件，添加到项目根目录中
- net-gateway-caller.js
- net-gateway-config.js
- net-gateway-window.js
- net-gateway-worker.js

b. 在主应用 index.html 中引用 caller 和 window

  <!doctype html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" type="text/css" href="/index.css" />
        <link rel="icon" href="/logo.svg" />
        <title>Net Gateway 主应用</title>
      </head>

      <body>
        <div id="app"></div>
      </body>

      <!-- 配置如下 -->
      <script type="module" src="/net-gateway-caller.js"></script>
      <script type="module" src="/net-gateway-window.js"></script>
    </html>

c. 根据需求，修改配置文件 net-gateway-config.js

  // @ts-nocheck
  /* eslint-disable */

  /**
  * 配置需要拦截的请求
  */
  const NetProxys = [
    /^http:\/\/localhost:5179(\/[\s\S]*)?$/i
  ]

/**
* 配置无需拦截的请求 - (过滤 NetProxys 选项)
*/
const NetWhites = [
  /^http:\/\/localhost:5179\/net-gateway-config\.js(\?[\s\S]+)?/i,
  /^http:\/\/localhost:5179\/net-gateway-caller\.js(\?[\s\S]+)?/i,
  /^http:\/\/localhost:5179\/net-gateway-worker\.js(\?[\s\S]+)?/i,
  /^http:\/\/localhost:5179\/net-gateway-window\.js(\?[\s\S]+)?/i,
  /^http:\/\/localhost:5179\/favicon\.ico(\?[\s\S]+)?/i
]


/**
* 配置子应用的请求
* 
*   eg. 子应用 http://localhost:5179/_app_/child1/index.html 请求，则相当于 child1 应用的 base 为 /_app_/child1
*       那么在 child1 应用发起 http://localhost:5179/ant.png 请求, 会转换成 http://localhost:5179/_app_/child1/ant.png 请求
*       
*   eg. 子应用 http://localhost:5179/_app_/child2/index.html 请求，则相当于 child2 应用的 base 为 /_app_/child2
*       那么在 child2 应用发起 http://localhost:5179/home.png 请求, 会转换成 http://localhost:5179/_app_/child2/home.png 请求
* 
*/
const NetSubRoute = /^http:\/\/localhost:5179(\/_app_\/[^\/]+\/)[\s\S]*/i
const NetSubRewirte = /^(http:\/\/localhost:5179)\//i


/**
* 重定向处理 follow | error | manual | default
*/
const NetRedirect = 'default'


/**
* 是否开启网关
*/
const NetGateway = true


/**
* 是否开启日志
*/
const NetDebug = false

<br/>

- d. 根据业务逻辑调用 API

```js
  // clearCerter
  NetCaller().clearCerter({})

  // resetCerter
  NetCaller().resetCerter({ 'jwt-key': 'jwt-secret' })

  // updateCerter
  NetCaller().updateCerter({ 'jwt-key': 'jwt-secret' })

  // removeCerter
  NetCaller().removeCerter({ 'jwt-key': 'jwt-secret' })

如果是类似 Vue 项目，则使用方式中 a 和 b 两步可尝试替换如下

  # 下载
  pnpm add net-front-gateway

  // in main.ts 
  import 'net-front-gateway/net-gateway-caller'
  import 'net-front-gateway/net-gateway-window'

3. API 列表

clearCerter 清空 Service Worker Secret Headers
resetCerter 重置 Service Worker Secret Headers
updateCerter 更新 Service Worker Secret Headers
removeCerter 移除 Service Worker Secret Headers
broadcastMessage 广播信息给其他客户端(游览器标签页)
registerListener 注册 Service Worker 消息监听事件
removeListener 移除 Service Worker 消息监听事件
clearListener 清空 Service Worker 消息监听事件

broadcastMessage / registerListener / removeListener / clearListener 需配置
需重写 net-gateway-window.js
NetCaller("/net-gateway-worker.js", { broadcastMessage: true })
NetCaller("/net-gateway-worker.js", { registerListener: true })
NetCaller("/net-gateway-worker.js", { removeListener: true })
NetCaller("/net-gateway-worker.js", { clearListener: true })