@@ -7,47 +7,106 @@ Vue.component("http-remote-addr-config-box", {
77 isPrior : false ,
88 isOn : false ,
99 value : "${rawRemoteAddr}" ,
10- isCustomized : false
10+ type : "default" ,
11+
12+ requestHeaderName : ""
1113 }
1214 }
1315
14- let optionValue = ""
15- if ( ! config . isCustomized && ( config . value == "${remoteAddr}" || config . value == "${rawRemoteAddr}" ) ) {
16- optionValue = config . value
16+ // type
17+ if ( config . type == null || config . type . length == 0 ) {
18+ config . type = "default"
19+ switch ( config . value ) {
20+ case "${rawRemoteAddr}" :
21+ config . type = "default"
22+ break
23+ case "${remoteAddrValue}" :
24+ config . type = "default"
25+ break
26+ case "${remoteAddr}" :
27+ config . type = "proxy"
28+ break
29+ default :
30+ if ( config . value != null && config . value . length > 0 ) {
31+ config . type = "variable"
32+ }
33+ }
34+ }
35+
36+ // value
37+ if ( config . value == null || config . value . length == 0 ) {
38+ config . value = "${rawRemoteAddr}"
1739 }
1840
1941 return {
2042 config : config ,
2143 options : [
2244 {
2345 name : "直接获取" ,
24- description : "用户直接访问边缘节点,即 \"用户 --> 边缘节点\" 模式,这时候可以直接从连接中读取到真实的IP地址。" ,
25- value : "${rawRemoteAddr}"
46+ description : "用户直接访问边缘节点,即 \"用户 --> 边缘节点\" 模式,这时候系统会试图从直接的连接中读取到客户端IP地址。" ,
47+ value : "${rawRemoteAddr}" ,
48+ type : "default"
2649 } ,
2750 {
2851 name : "从上级代理中获取" ,
29- description : "用户和边缘节点之间有别的代理服务转发,即 \"用户 --> [第三方代理服务] --> 边缘节点\",这时候只能从上级代理中获取传递的IP地址。" ,
30- value : "${remoteAddr}"
52+ description : "用户和边缘节点之间有别的代理服务转发,即 \"用户 --> [第三方代理服务] --> 边缘节点\",这时候只能从上级代理中获取传递的IP地址;上级代理传递的请求报头中必须包含 X-Forwarded-For 或 X-Real-IP 信息。" ,
53+ value : "${remoteAddr}" ,
54+ type : "proxy"
3155 } ,
3256 {
33- name : "[自定义]" ,
57+ name : "从请求报头中读取" ,
58+ description : "从自定义请求报头读取客户端IP。" ,
59+ value : "" ,
60+ type : "requestHeader"
61+ } ,
62+ {
63+ name : "[自定义变量]" ,
3464 description : "通过自定义变量来获取客户端真实的IP地址。" ,
35- value : ""
65+ value : "" ,
66+ type : "variable"
3667 }
37- ] ,
38- optionValue : optionValue
68+ ]
69+ }
70+ } ,
71+ watch : {
72+ "config.requestHeaderName" : function ( value ) {
73+ if ( this . config . type == "requestHeader" ) {
74+ this . config . value = "${header." + value . trim ( ) + "}"
75+ }
3976 }
4077 } ,
4178 methods : {
4279 isOn : function ( ) {
4380 return ( ( ! this . vIsLocation && ! this . vIsGroup ) || this . config . isPrior ) && this . config . isOn
4481 } ,
45- changeOptionValue : function ( ) {
46- if ( this . optionValue . length > 0 ) {
47- this . config . value = this . optionValue
48- this . config . isCustomized = false
49- } else {
50- this . config . isCustomized = true
82+ changeOptionType : function ( ) {
83+ let that = this
84+
85+ switch ( this . config . type ) {
86+ case "default" :
87+ this . config . value = "${rawRemoteAddr}"
88+ break
89+ case "proxy" :
90+ this . config . value = "${remoteAddr}"
91+ break
92+ case "requestHeader" :
93+ this . config . value = ""
94+ if ( this . requestHeaderName != null && this . requestHeaderName . length > 0 ) {
95+ this . config . value = "${header." + this . requestHeaderName + "}"
96+ }
97+
98+ setTimeout ( function ( ) {
99+ that . $refs . requestHeaderInput . focus ( )
100+ } )
101+ break
102+ case "variable" :
103+ this . config . value = "${rawRemoteAddr}"
104+
105+ setTimeout ( function ( ) {
106+ that . $refs . variableInput . focus ( )
107+ } )
108+
109+ break
51110 }
52111 }
53112 } ,
@@ -63,28 +122,36 @@ Vue.component("http-remote-addr-config-box", {
63122 <input type="checkbox" value="1" v-model="config.isOn"/>
64123 <label></label>
65124 </div>
66- <p class="comment">选中后表示使用自定义的请求变量获取客户端IP 。</p>
125+ <p class="comment">选中后,表示使用自定义的请求变量获取客户端IP 。</p>
67126 </td>
68127 </tr>
69128 </tbody>
70129 <tbody v-show="isOn()">
71130 <tr>
72131 <td>获取IP方式 *</td>
73132 <td>
74- <select class="ui dropdown auto-width" v-model="optionValue " @change="changeOptionValue ">
75- <option v-for="option in options" :value="option.value ">{{option.name}}</option>
133+ <select class="ui dropdown auto-width" v-model="config.type " @change="changeOptionType ">
134+ <option v-for="option in options" :value="option.type ">{{option.name}}</option>
76135 </select>
77- <p class="comment" v-for="option in options" v-if="option.value == optionValue && option.description.length > 0">{{option.description}}</p>
136+ <p class="comment" v-for="option in options" v-if="option.type == config.type && option.description.length > 0">{{option.description}}</p>
78137 </td>
79138 </tr>
80- <tr v-show="optionValue.length == 0">
139+
140+ <!-- read from request header -->
141+ <tr v-show="config.type == 'requestHeader'">
142+ <td>请求报头 *</td>
143+ <td>
144+ <input type="text" name="requestHeaderName" v-model="config.requestHeaderName" maxlength="100" ref="requestHeaderInput"/>
145+ <p class="comment">请输入包含有客户端IP的请求报头,需要注意大小写,常见的有<code-label>X-Forwarded-For</code-label>、<code-label>X-Real-IP</code-label>、<code-label>X-Client-IP</code-label>等。</p>
146+ </td>
147+ </tr>
148+
149+ <!-- read from variable -->
150+ <tr v-show="config.type == 'variable'">
81151 <td>读取IP变量值 *</td>
82152 <td>
83- <input type="hidden" v-model="config.value" maxlength="100"/>
84- <div v-if="optionValue == ''" style="margin-top: 1em">
85- <input type="text" v-model="config.value" maxlength="100"/>
86- <p class="comment">通过此变量获取用户的IP地址。具体可用的请求变量列表可参考官方网站文档。</p>
87- </div>
153+ <input type="text" name="value" v-model="config.value" maxlength="100" ref="variableInput"/>
154+ <p class="comment">通过此变量获取用户的IP地址。具体可用的请求变量列表可参考官方网站文档;比如通过报头传递IP的情形,可以使用<code-label>\${header.你的自定义报头}</code-label>(类似于<code-label>\${header.X-Forwarded-For}</code-label>,需要注意大小写规范)。</p>
88155 </td>
89156 </tr>
90157 </tbody>
0 commit comments