@arkxos/arkos-app-gateway-manage 0.1.0

package/src/views/CreateGateway.vue

@@ -0,0 +1,836 @@
+<template>
+	<div class="greateGateway">
+		<el-row>
+			<el-col>
+				<el-card class="box-card">
+					<template #header>
+						<div class="clear-box">
+							<div lass="clear-l">
+								<span style="font-weight: 500;">网关路由》服务配置</span>
+								<el-popover trigger="click" placement="bottom" width="500">
+									<div style="font-size: 10pt;">
+										<span>配置说明：</span><br/>
+										<span>1.服务URL，支持http、https、server-id(lb://xxx)模式转发。</span><br/>
+										<span>2.断言Path，请根据实际API调用路径设置，不含服务host和port，可添加自定义前缀。</span><br/>
+										<span>3.过滤StripPrefix根据值，截取断言Path多节斜杠后内容，拼接到服务URL上。</span><br/>
+										<span>4.重定向RewritePath，会将原始请求Path指向新的Path路径，但网关路由地址不变，如:/foo/abc指向/abc。</span><br/>
+										<span>5.断言Header，会查找原始请求Header头部信息，获取匹配项。</span><br/>
+										<span>6.示例：</span><br/>
+										<span>&nbsp;&nbsp;a.服务URL示例：http://server:port、http://server.com、lb://xxx ,支持但不推荐：http://server:port/api.do。</span><br/>
+										<span>&nbsp;&nbsp;b.断言Path示例：/route/producer/** 或 /producer/api。</span><br/>
+										<span>&nbsp;&nbsp;c.断言Host示例：**.my.com 或 my.com 、127.0.0.1:8771。</span><br/>
+										<span>&nbsp;&nbsp;d.断言RemoteAddr示例：192.168.1.1 或 192.168.1.1/100。</span><br/>
+										<span>&nbsp;&nbsp;e.重定向RewritePath示例：/foo/(?&lt;segment&gt;.*),/$\{segment}，需满足java正则表达示或参见官方。</span><br/>
+										<span>&nbsp;&nbsp;f.断言Header示例：Header=X-Request-Id, \d+，其中\d+表示正则匹配的任意值，需满足java正则表达示或参见官方。</span><br/>
+										<span>7.如配置多个断言项，则gateway网关采用断言组合匹配方式（and关系）转发到符合的路由服务中。</span>
+									</div>
+									<template #reference>
+										<el-button style="padding: 3px 0; " icon="el-icon-questionFilledFilled" type="text" title="说明"></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div class="clear-r">
+							  <el-button icon="el-icon-delete" size="mini" type="warning" @click="resetForm"> 清 空 </el-button>
+							  <el-button icon="el-icon-tickets" size="mini" type="success" @click="submit"> 发 布 </el-button>
+						</div>
+						</div>
+
+					</template>
+
+					
+					<el-row>
+						<el-col :span="24">
+							<div style="float: left;">
+								<el-input placeholder="示例：project-method" v-model="form.id" style="width: 343px;" :disabled="idDisabled">
+								  <template #prepend>RouteId</template>
+								</el-input>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-input placeholder="示例：CRM" v-model="form.systemCode" style="width: 343px;">
+								  <template #prepend>系统代号</template>
+								</el-input>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-input placeholder="示例：CRM-用户信息获取网关" v-model="form.name" style="width: 343px;">
+								  <template #prepend>名称</template>
+								</el-input>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="170" trigger="click">
+								  <el-radio v-model="form.status" label="0">启用</el-radio>
+								  <el-radio v-model="form.status" label="1">禁用</el-radio>
+									<template #reference>
+								  	<el-button>服务状态:{{form.status === '0'?'启用':'禁用'}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" trigger="click" width="420">
+								  <el-radio-group v-model="form.groupCode" size="mini" @change="handleSelectedGroup">
+									  <el-radio-button v-for="item in groupOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
+								  </el-radio-group>
+									<template #reference>
+								  	<el-button>分组:{{groupName}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+						</el-col>
+					</el-row>
+					
+					<el-row style="margin-top: 20px;">
+						<el-col :span="24">
+							<div style="float: left;">
+							  <el-input placeholder="请输入网关服务URL,示例:http://server:port、http://server.com、lb://xxx" v-model="form.uri" class="input-with-select" style="width: 696px;">
+									<template #prepend>
+										<el-select v-model="form.method" placeholder="请选择" style="width: 90px;">
+										   <el-option v-for="item in methodOptions" :key="item.value" :label="item.label" :value="item.value"/>
+										</el-select>
+									</template>
+
+							  </el-input>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="550" trigger="click">
+								  <el-input placeholder="示例：Path=/route/producer/** 或 /producer/api" v-model="form.path" style="width: 500px;">
+									<template #prepend>Path=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>断言Path={{form.path}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="550" trigger="click">
+								  <el-input placeholder="示例：Header=X-Request-Id, \d+" v-model="form.header">
+									<template #prepend>Header=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>断言Header={{form.header}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="300" trigger="click">
+								  <el-input placeholder="示例：StripPrefix=1" v-model="form.stripPrefix">
+									<template #prepend>StripPrefix=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>过滤StripPrefix={{form.stripPrefix}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+						</el-col>			
+					</el-row>
+
+					<el-row style="margin-top: 20px;">
+						<el-col :span="24">
+							<div style="float: left;">
+								<el-popover placement="bottom" width="400" trigger="click">
+								  <el-input placeholder="示例：Host=**.my.com,my.com" v-model="form.host" >
+									<template #prepend>Host=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>断言Host={{form.host}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="400" trigger="click">
+								  <el-input placeholder="示例：RemoteAddr=192.168.1.1/100" v-model="form.remoteAddr" >
+									<template #prepend>RemoteAddr=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>断言RemoteAddr={{form.remoteAddr}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="450" trigger="click">
+								  <el-input placeholder="示例：RequestParameter=version,v01" v-model="form.requestParameter" >
+									<template #prepend>RequestParameter=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>参数RequestParameter={{form.requestParameter}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+							<div style="float: left; margin-left: 10px;">
+								<el-popover placement="bottom" width="500" trigger="click">
+								  <el-input placeholder="示例：RewritePath=/foo/(?<segment>.*), /$\{segment}" v-model="form.rewritePath">
+									<template #prepend>RewritePath=</template>
+								  </el-input>
+									<template #reference>
+								  	<el-button>重写路径RewritePath={{form.rewritePath}}<el-icon><CaretBottom /></el-icon></el-button>
+									</template>
+								</el-popover>
+							</div>
+						</el-col>
+					</el-row>
+					
+				</el-card>
+			</el-col>
+		</el-row>
+		
+		<el-row :gutter="20" style="margin-top: 20px;">
+			<el-col :span="6">
+				<el-card class="box-card">
+					<template #header>
+						<div class="clearfix">
+							<span>Sentinel熔断器</span>
+							<el-popover trigger="click" placement="bottom">
+								<div style="font-size: 10pt;">
+									<span>配置说明：</span><br/>
+									<span>1.对调用链路中不稳定的资源进行熔断降级也是保障高可用的重要措施之一。</span><br/>
+									<span>2.熔断策略：支持慢调用比例/异常比例/异常数策略(默认慢调用比例)。</span><br/>
+									<span>3.熔断时长：单位为秒(s)。</span><br/>
+									<span>4.触发数量：熔断触发的最小请求数，请求数小于该值时即使异常比率超出阈值也不会熔断(默认5)。</span><br/>
+									<span>5.统计时长：统计时长（单位为 ms），如 60*1000 代表分钟级（1000 ms）。</span><br/>
+									<span>6.慢请求比例：慢调用比例阈值，仅慢调用比例模式有效。</span><br/>
+									<span>7.参见官方文档：https://sentinelguard.io/zh-cn/docs/circuit-breaking.html</span><br/>
+								</div>
+								<template #reference>
+									<el-button style="float: right; padding: 3px 0; " icon="el-icon-questionFilled" type="text" title="说明">说明</el-button>
+								</template>
+							</el-popover>
+						</div>	
+					</template>
+					<div>
+						<el-row :gutter="24">
+							<el-col :span="5">
+								<span class="text item" style="line-height: 38px;">熔断策略</span>
+							</el-col>
+							<el-col :span="19">
+								<el-radio-group v-model="form.degradeRule.grade" size="small">
+									<el-radio-button v-for="item in degradeRuleGradeOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
+								</el-radio-group>
+							</el-col>
+						</el-row>
+					</div>
+					<el-collapse accordion style="margin-top: 10px;">
+					  <el-collapse-item>
+					    <template #title>
+					      熔断配置&nbsp;&nbsp;<i v-show="degradeRule.checked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="degradeRule.checked">启用</el-checkbox></div>
+					    <div>基于网关服务访问状态与阈值判断服务的可用性，当服务在指定时间内达到指定错误的次数或比例后，暂停路由服务访问。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="不同策略阈值,如:慢请求>=3000，异常比例0.6/异常数60" v-model="form.degradeRule.count" title="不同策略阈值,如:慢请求>=3000，异常比例0.6/异常数60">
+							  <template #prepend>计算阈值</template>
+							</el-input>
+						</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="单位：毫秒,如：在3000ms内错误的次数或比例" v-model="form.degradeRule.statIntervalMs" title="单位：毫秒,如：在3000ms内错误的次数或比例">
+								<template #prepend>统计时长</template>
+							</el-input>
+						</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="触发熔断后的降级时长,单位：秒" v-model="form.degradeRule.timeWindow" title="触发熔断后的降级时长,单位：秒">
+								<template #prepend>熔断时长</template>
+							</el-input>
+						</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="触发熔断最少请求数量，低于该值不触发" v-model="form.degradeRule.minRequestAmount" title="触发熔断最少请求数量，低于该值不触发">
+								<template #prepend>触发数量</template>
+							</el-input>
+						</div>
+						<!-- <div style="margin-top: 10px;">
+							<el-input size="small" placeholder="触发fallbackcmd提示内容,如:system is error" v-model="form.fallbackMsg">
+							<template #prepend>提示内容</template>
+							</el-input>
+						</div> -->
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="慢请求比例策略必配" v-model="form.degradeRule.slowRatioThreshold" title="慢请求比例策略必配">
+							  <template #prepend>慢请求比例</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					</el-collapse>					
+				</el-card>
+
+				<el-card class="box-card" style="margin-top: 20px;">
+					<template #header>
+						<div class="clearfix">
+							<span>监控器</span>
+							<el-popover trigger="click" placement="bottom">
+								<div style="font-size: 10pt;">
+									<span>配置说明：</span><br/>
+									<span>1.只向网关服务发起http请求，只有服务host和port，不含请求路径和参数。</span><br/>
+									<span>2.未超时则认为服务存活，不考虑服务有效性。</span><br/>
+									<span>3.心跳检测请求Header中带<span style="font-weight: bold;">Keepalive:flying-fish-gateway</span>，服务可做特殊性响应。</span><br/>
+									<span>4.心跳检测服务URL示例：http://server:port、http://server.com、lb://xxx 。</span><br/>
+									<span>5.网关服务无客户端请求后，每30秒触发一次心跳检测。</span><br/>
+									<span>6.告警重试设置为禁用后，心跳检测失败后，将不再继续检测，并且网关将会拒绝所有客户端请求，直到网关服务状态为：启用。</span>
+								</div>
+								<template #reference>
+									<el-button style="float: right; padding: 3px 0; " icon="el-icon-questionFilled" type="text" title="说明">说明</el-button>
+								</template>
+							</el-popover>
+						</div>
+					</template>
+
+					<el-collapse accordion>
+					  <el-collapse-item>
+					    <template #title>
+					      监控告警&nbsp;&nbsp;<i v-show="monitor.checked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="monitor.checked">启用</el-checkbox></div>
+					    <div>基于网关服务心跳检测，当网关服务正常运行中，没有客户端请求后，开始每30秒一次心跳检测。</div>
+						<div style="margin-top: 10px;">
+							<el-popover placement="bottom" width="170" trigger="click">
+								<el-radio v-model="form.monitor.recover" label="0">启用</el-radio>
+								<el-radio v-model="form.monitor.recover" label="1">禁用</el-radio>
+								<template #reference>
+									<el-button>告警重试：{{form.monitor.recover === '0'?'启用':'禁用'}}<el-icon><CaretBottom /></el-icon></el-button>
+								</template>
+							</el-popover>
+							<el-popover placement="bottom" width="460" trigger="click">
+								<el-radio-group v-model="form.monitor.frequency" size="mini" @change="handleSelectedMonitorFrequency">
+									<el-radio-button v-for="item in monitorOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
+								</el-radio-group>
+								<template #reference>
+									<el-button>告警通知频率：{{monitorFrequencyName}}<el-icon><CaretBottom /></el-icon></el-button>
+								</template>
+							</el-popover>
+						</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：user1@qq.com,user2@qq.com" v-model="form.monitor.emails" maxlength="200" show-word-limit>
+							  <template #prepend>通知邮箱</template>
+							</el-input>
+						</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：XXX网关服务发生告警，请及时处理" v-model="form.monitor.topic" maxlength="200" show-word-limit>
+							  <template #prepend>告警提示</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					</el-collapse>
+				</el-card>
+
+			</el-col>
+
+			<el-col :span="6">
+				<el-card class="box-card">
+					<template #header>
+						<div class="clearfix">
+							<span>过滤器</span>
+							<el-popover trigger="click" placement="bottom">
+								<div style="font-size: 10pt;">
+									<span>配置说明：</span><br/>
+									<span>1.IP过滤需要配置本网关路由的注册客户端，非注册客户端IP不可访问。</span><br/>
+									<span>2.IP名单管理中的禁止通行的IP不可访问本网关路由。</span><br/>
+									<span>3.TOKEN过滤目前只对请求Header中带<span style="font-weight: bold;">TOKEN</span>做非空验证，暂无其它响应。</span><br/>
+									<span>4.ID过滤对请求Header中带<span style="font-weight: bold;">CLIENTID</span>做较验，非注册客户端ID不可访问。</span><br/>
+								</div>
+								<template #reference>
+									<el-button style="float: right; padding: 3px 0; " icon="el-icon-questionFilled" type="text" title="说明">说明</el-button>
+								</template>
+							</el-popover>
+						</div>
+					</template>
+
+					<el-collapse accordion>
+					  <el-collapse-item>
+					    <template #title>
+					      IP过滤&nbsp;&nbsp;<i v-show="filter.ipChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="filter.ipChecked">启用</el-checkbox></div>
+					    <div>基于IP进行拦截，只有客户端管理中添加对本网关服务连接权限的指定IP才能访问本路由地址。</div>
+					  </el-collapse-item>
+					  <el-collapse-item>
+						  <template #title>
+						    TOKEN过滤&nbsp;&nbsp;<i v-show="filter.tokenChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+						  </template>
+					    <div><el-checkbox v-model="filter.tokenChecked">启用</el-checkbox></div>
+					    <div>基于TOKEN进行拦截，只有符合指定TOKEN才能访问本路由地址。</div>
+					  </el-collapse-item>
+					  <el-collapse-item>
+						  <template #title>
+						    ID过滤&nbsp;&nbsp;<i v-show="filter.idChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+						  </template>
+					    <div><el-checkbox v-model="filter.idChecked">启用</el-checkbox></div>
+					    <div>基于ID进行拦截，只有客户端管理中添加对本网关服务连接权限的指定ID才能访问本路由地址。</div>
+					  </el-collapse-item>
+					</el-collapse>
+				</el-card>
+
+				<el-card class="box-card" style="margin-top: 20px;">
+					<template #header>
+						<div class="clearfix">
+							<span>缓存策略</span>
+							<el-popover trigger="click" placement="bottom">
+								<div style="font-size: 10pt;">
+									<span>配置说明：</span><br/>								
+									<span>1.基于Redis缓存路由服务端响应结果到网关，减少后端服务并发压力。</span><br/>
+									<span>2.适用于非高频更新数据请求（如：配置、字典等）。高频更新数据或实时数据请求不适用，会严重影响Gateway网关服务Redis资源平衡。</span><br/>
+									<span>3.基于请求参数和body值组合，计算其md5值为缓存key并缓存路由服务响应结果，之后每次相同传参请求不再路由到后端服务，直接取网关未过期缓存结果；</span><br/>
+									<span>4.同一个路由服务不能超过100个不同请求参数缓存结果，否则缓存失效将直接路由到后端服务。</span><br/>
+									<span>5.缓存过期后，则下一次请求重新获取并缓存路由服务响应结果；</span><br/>
+									<span>6.最大缓存时间为7天，缓存单位为秒(s)，即：7 * 24 * 60 * 60 = 604800 。</span><br/>
+
+								</div>
+								<template #reference>
+									<el-button style="float: right; padding: 3px 0; " icon="el-icon-questionFilled" type="text" title="说明">说明</el-button>
+								</template>
+							</el-popover>
+						</div>
+					</template>
+
+					<el-collapse accordion>
+					  <el-collapse-item>
+					    <template #title>
+					      数据缓存&nbsp;&nbsp;<i v-show="cacheResult.checked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="cacheResult.checked">启用</el-checkbox></div>
+					    <div>基于Redis缓存本网关路由后的响应结果，只对response状态为200的响应进行缓存。主要适用于非高频更新数据请求，如：系统配置，字典数据，常量数据等。最大缓存时间为7天=缓存单位为604800秒。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="响应结果缓存过期时长(秒)" v-model="form.cacheTtl">
+							  <template #prepend>最大缓存时间(秒/s)</template>
+							</el-input>
+						</div>					
+					  </el-collapse-item>
+					</el-collapse>
+				</el-card>
+				
+			</el-col>
+			
+
+			<el-col :span="6">
+				<el-card class="box-card">
+					<template #header>
+						<div class="clearfix">
+							<span>Sentinel限流器</span>
+							<el-popover trigger="click" placement="bottom">
+								<div style="font-size: 10pt;">
+									<span>配置说明：</span><br/>								
+									<span>1.线程数限流用于保护业务线程数不被耗尽。</span><br/>
+									<span>2.流量控制主要有两种统计类型，一种是统计线程数，另外一种则是统计 QPS。</span><br/>
+									<span>3.参见官方文档：https://sentinelguard.io/zh-cn/docs/flow-control.html</span><br/>								
+								</div>
+								<template #reference>
+									<el-button style="float: right; padding: 3px 0; " icon="el-icon-questionFilled" type="text" title="说明">说明</el-button>
+								</template>
+							</el-popover>
+						</div>
+					</template>
+
+					<div>
+						<el-row :gutter="24">
+							<el-col :span="5">
+								<span class="text item" style="line-height: 38px;">每秒流量</span>
+							</el-col>
+							<el-col :span="19">
+								<el-input-number size="small" v-model="form.flowRule.count" :step="1" :min="0" :max="10000" style="width: 60%;"/>
+							</el-col>
+						</el-row>
+
+						<el-row :gutter="24">
+							<el-col :span="5">
+								<span class="text item" style="line-height: 38px;">限流模式</span>
+							</el-col>
+							<el-col :span="19">
+								<el-radio-group v-model="form.flowRule.grade" size="small">
+									<el-radio-button v-for="item in flowRuleGradeOptions" :key="item.value" :label="item.value">{{item.label}}</el-radio-button>
+								</el-radio-group>
+							</el-col>
+						</el-row>
+					</div>					
+					<el-collapse accordion style="margin-top: 10px;">
+					  <el-collapse-item>
+					    <template #title>
+							直接拒绝&nbsp;&nbsp;<i v-show="flowRule.defaultChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="flowRule.defaultChecked" @change="handleFlowRuleChecked('default')">启用</el-checkbox></div>
+					    <div>该方式是默认的流量控制方式，当QPS超过任意规则的阈值后，新的请求就会被立即拒绝，拒绝方式为抛出FlowException。</div>
+					  </el-collapse-item>
+					  <el-collapse-item title="URI限流">
+					    <template #title>
+							冷启动&nbsp;&nbsp;<i v-show="flowRule.warmUpChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="flowRule.warmUpChecked" @change="handleFlowRuleChecked('warmUp')">启用</el-checkbox></div>
+					    <div>该方式主要用于系统长期处于低水位的情况下，当流量突然增加时，直接把系统拉升到高水位可能瞬间把系统压垮。通过"冷启动"，让通过的流量缓慢增加，在一定时间内逐渐增加到阈值上限，给冷系统一个预热的时间，避免冷系统被压垮的情况。</div>
+					  </el-collapse-item>
+					  <el-collapse-item>
+					    <template #title>
+							匀速器&nbsp;&nbsp;<i v-show="flowRule.rateLimiterChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="flowRule.rateLimiterChecked" @change="handleFlowRuleChecked('rateLimiter')">启用</el-checkbox></div>
+					    <div>该方式严格控制了请求通过的间隔时间，也即是让请求以均匀的速度通过，对应的是漏桶算法。主要用于处理间隔性突发的流量，例如消息队列。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="多余的请求在队列中等待时间（ms）" v-model="form.flowRule.maxQueueingTimeMs">
+							  <template #prepend>最大等待时间</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					</el-collapse>
+				</el-card>
+
+			</el-col>
+
+			<el-col :span="6">
+				<el-card class="box-card">
+					<template #header>
+						<div class="clearfix">
+							<span>鉴权器</span>
+							<el-button style="float: right; padding: 3px 0; " icon="el-icon-questionFilled" type="text">说明</el-button>
+						</div>
+					</template>
+
+					<el-collapse accordion>
+					  <el-collapse-item>
+					    <template #title>
+					      HEADER验证&nbsp;&nbsp;<i v-show="access.headerChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+					    </template>
+					    <div><el-checkbox v-model="access.headerChecked">启用</el-checkbox></div>
+					    <div>获取客户端请求中的所带的HEADER头部信息，验证指定键值，不符合验证规则，则直接拒决请求。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：Accept-Language: zh-CN,zh;q=0.9" v-model="form.accessHeader">
+							  <template #prepend>HEADER</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					  <el-collapse-item>
+						  <template #title>
+						    IP验证&nbsp;&nbsp;<i v-show="access.ipChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+						  </template>
+					    <div><el-checkbox v-model="access.ipChecked">启用</el-checkbox></div>
+					    <div>如果启用IP过滤，则会先执行IP过滤后，再执行本IP验证，不符合验证规则，则直接拒决请求。通常用于临时性IP过滤。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：192.168.1.100,92.168.1.*" v-model="form.accessIp">
+							  <template #prepend>IP</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					  <el-collapse-item>
+						  <template #title>
+							参数验证&nbsp;&nbsp;<i v-show="access.parameterChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+						  </template>
+					    <div><el-checkbox v-model="access.parameterChecked">启用</el-checkbox></div>
+					    <div>获取URL请求串中的所带的参数，验证指定参数值，不符合验证规则，则直接拒决请求。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：token=uuid" v-model="form.accessParameter">
+							  <template #prepend>请求参数</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					  <el-collapse-item>
+						  <template #title>
+						  	时间验证&nbsp;&nbsp;<i v-show="access.timeChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+						  </template>
+					    <div><el-checkbox v-model="access.timeChecked">启用</el-checkbox></div>
+					    <div>只允许指定时间段内进行访问，不符合验证规则，则直接拒决请求。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：08:00:00,20:00:00" v-model="form.accessTime">
+							  <template #prepend>时间</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					  <el-collapse-item title="Cookie验证">
+						  <template #title>
+						  	Cookie验证&nbsp;&nbsp;<i v-show="access.cookieChecked" class="header-icon el-icon-success" style="color: #34bfa3; font-size: 12pt;"></i>
+						  </template>
+					    <div><el-checkbox v-model="access.cookieChecked">启用</el-checkbox></div>
+					    <div>获取客户端请求所带的cookie信息，验证指定cookie参数值，不符合验证规则，则直接拒决请求。</div>
+						<div style="margin-top: 10px;">
+							<el-input size="small" placeholder="示例：name=value" v-model="form.accessCookie">
+							  <template #prepend>Cookie</template>
+							</el-input>
+						</div>
+					  </el-collapse-item>
+					</el-collapse>
+				</el-card>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup>
+import { CaretBottom } from '@element-plus/icons-vue'
+</script>
+
+<script>
+	// import gatewayJson from '../api/json/gateway.json'
+	import {addRoute,updateRoute} from '../api/gateway_api.js'
+	
+	export default {
+		data() {
+			return {
+				model3:'',
+				form:{
+					id:'',
+					systemCode:'',
+					name:'',
+					stripPrefix:'',
+					status:'1',
+					uri:'',
+					method:'',
+					path:'',
+					host:'',
+					remoteAddr:'',
+					header:'',
+					rewritePath:'',
+					requestParameter:'',
+					accessHeader:'',
+					accessIp:'',
+					accessParameter:'',
+					accessTime:'',
+					accessCookie:'',
+					fallbackMsg:'',
+					fallbackTimeout:0,
+					replenishRate:20,
+					burstCapacity:100,
+					groupCode:'',
+					monitor:{
+						recover: '0',
+						frequency: '30m',
+						emails: '',
+						topic: ''
+					},
+					flowRule:{
+						grade: 1,
+						count: 10.0,
+						limitApp: 'default',
+						strategy: 0,
+						controlBehavior: 0,
+						maxQueueingTimeMs: 500
+					},
+					degradeRule:{
+						grade: 0,
+						count: 0.0,
+						timeWindow: 3000,
+						minRequestAmount: 5,
+						statIntervalMs: 1000,
+						slowRatioThreshold: 1
+					},
+					cacheTtl: 0
+				},			
+				filter:{
+					ipChecked: false,
+					tokenChecked: false,
+					idChecked: false
+				},
+				access:{
+					headerChecked: false,
+					ipChecked: false,
+					parameterChecked: false,
+					timeChecked: false,
+					cookieChecked: false
+				},
+				monitor: {
+					checked: false
+				},
+				degradeRule:{
+					checked: false
+				},
+				flowRule:{
+					defaultChecked: false,
+					warmUpChecked: false,
+					rateLimiterChecked: false
+				},
+				handleType: 'add',
+				idDisabled: false,
+				methodOptions: [
+					{value: null, label: 'ALL'},
+					{value: 'POST',label: 'POST'}, 
+					{value: 'GET',label: 'GET'},
+					{value: 'PUT',label: 'PUT'},
+					{value: 'DELETE',label: 'DELETE'}
+				],
+				monitorFrequencyName: '',
+				monitorOptions: [
+					{value: '30m',label: '30分钟一次'},
+					{value: '1h', label: '1小时一次'},
+					{value: '5h',label: '5小时一次'}, 
+					{value: '12h',label: '12小时一次'},
+					{value: '24h',label: '24小时一次'}
+				],
+				degradeRuleGradeOptions: [
+					{value: 0,label: '慢调用比例'},
+					{value: 1, label: '异常比例'},
+					{value: 2,label: '异常数量'}
+				],
+				flowRuleGradeOptions: [
+					{value: 0,label: '---- 线程数 ---'},
+					{value: 1, label: '---- QPS ---'}
+				],
+				maxTime: 60,
+				groupName:'',
+				groupOptions: this.GLOBAL_VAR.groups,
+				cacheResult: {
+					checked: false
+				}
+			}
+		},
+		created: function() {
+			//在组件创建完毕后加载
+			let query = this.$route.query;
+			if (query){
+				this.handleType = query.handleType;
+				if (this.handleType === 'edit'){
+					let route = query.route;
+					console.log('route', route);
+					this.init(route);
+				}
+			}
+		},
+		mounted: function() {
+		},
+		beforeDestroy: function() {
+		},
+		methods:{
+			init(route) {
+				if (route && route.form){
+					let monitor = route.form.monitor ? route.form.monitor : this.form.monitor;
+					let flowRule = route.form.flowRule ? route.form.flowRule : this.form.flowRule;
+					let degradeRule = route.form.degradeRule ? route.form.degradeRule : this.form.degradeRule;
+					console.log('flowRule', flowRule)
+					this.form = route.form;
+					this.filter = route.filter;
+					this.access = route.access;
+					this.monitor = route.monitor;
+					this.flowRule = route.flowRule;
+					this.degradeRule = route.degradeRule;
+					this.form.monitor = monitor;
+					this.form.flowRule = flowRule;
+					this.form.degradeRule = degradeRule;
+					this.cacheResult = route.cacheResult;
+					console.log('this.form', this.form);
+					this.idDisabled = true;					
+
+					// if (this.form.monitor == undefined){
+					// 	this.form.monitor = {
+					// 		checked: false,
+					// 		recover: '0',
+					// 		frequency: '30m',
+					// 		emails: '',
+					// 		topic: ''
+					// 	};
+					// }
+
+					this.handleSelectedGroup(this.form.groupCode);
+					this.handleSelectedMonitorFrequency(this.form.monitor? this.form.monitor.frequency: null);
+				}
+			},
+			goBack() {
+				this.$router.push({path:'/gatewayList',query:{}});
+			},
+			handleFlowRuleChecked(type){//Sentinel限流器，三选一
+				this.flowRule.defaultChecked = (this.flowRule.defaultChecked && type === 'default')?true:false;
+				this.flowRule.warmUpChecked = (this.flowRule.warmUpChecked && type === 'warmUp')?true:false;
+				this.flowRule.rateLimiterChecked = (this.flowRule.rateLimiterChecked && type === 'rateLimiter')?true:false;
+				this.form.flowRule.controlBehavior = type === 'warmUp' ? 1 : (type === 'rateLimiter' ? 2 : 0);
+			},
+			handleSelectedGroup(val){
+				let size = this.groupOptions.length;
+				for (var i=0;i <size; i++){
+					if (this.groupOptions[i].value === val){
+						this.groupName = this.groupOptions[i].label;
+						break;
+					}
+				}
+			},
+			handleSelectedMonitorFrequency(val){
+				if (val){
+					let size = this.monitorOptions.length;
+					for (var i=0;i <size; i++){
+						if (this.monitorOptions[i].value === val){
+							this.monitorFrequencyName = this.monitorOptions[i].label;
+							break;
+						}
+					}
+				}
+			},
+			submit(){
+				let data = {
+					form: this.form, 
+					filter: this.filter, 
+					// hystrix:this.hystrix, 
+					// limiter:this.limiter, 
+					access: this.access, 
+					monitor: this.monitor,
+					flowRule: this.flowRule,
+					degradeRule: this.degradeRule,
+					cacheResult: this.cacheResult
+				};
+				let _this = this;
+				if (this.handleType === 'edit'){
+					updateRoute(data).then(function(result){
+						console.log(result);
+						_this.GLOBAL_FUN.successMsg();
+					});
+				} else {
+					addRoute(data).then(function(result){
+						_this.GLOBAL_FUN.successMsg();
+					});
+				}
+			},
+			resetForm() {
+				this.form = {
+					id: this.handleType === 'edit'?this.form.id:null,
+					systemCode:null,
+					name:null,
+					stripPrefix:'',
+					status:'1',
+					uri:null,
+					method:null,
+					path:null,
+					host:null,
+					remoteAddr:null,
+					header:null,
+					rewritePath:null,
+					requestParameter:null,
+					accessHeader:null,
+					accessIp:null,
+					accessParameter:null,
+					accessTime:'',
+					accessCookie:null,
+					fallbackMsg:null,
+					fallbackTimeout:0,
+					replenishRate:20,
+					burstCapacity:100,
+					cacheTtl: 0,
+					monitor: {},
+					degradeRule: {},
+					flowRule: {}					
+				}
+				this.filter={};
+				this.access={};
+				this.monitor={};
+				this.degradeRule={};
+				this.flowRule={};	
+				this.cacheResult={};
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+.greateGateway {
+	padding: 20px;
+}
+
+.clearfix,
+.clear-box {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+
+	.clear-l,
+	.clear-r {
+		display: flex;
+		align-items: center;
+	}
+}
+
+.text {
+	font-size: 14px;
+	white-space: nowrap;
+}
+.item {
+	margin-bottom: 18px;
+}
+div {
+	font-weight: 500;
+	text-align: left;
+}
+</style>