mirror of
https://github.com/TeaOSLab/EdgeAdmin.git
synced 2026-05-03 13:35:19 +08:00
访问控制支持基本认证和子请求认证
This commit is contained in:
101
web/public/js/components/server/http-auth-basic-auth-user-box.js
Normal file
101
web/public/js/components/server/http-auth-basic-auth-user-box.js
Normal file
@@ -0,0 +1,101 @@
|
||||
// 基本认证用户配置
|
||||
Vue.component("http-auth-basic-auth-user-box", {
|
||||
props: ["v-users"],
|
||||
data: function () {
|
||||
let users = this.vUsers
|
||||
if (users == null) {
|
||||
users = []
|
||||
}
|
||||
return {
|
||||
users: users,
|
||||
isAdding: false,
|
||||
updatingIndex: -1,
|
||||
|
||||
username: "",
|
||||
password: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add: function () {
|
||||
this.isAdding = true
|
||||
this.username = ""
|
||||
this.password = ""
|
||||
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
that.$refs.username.focus()
|
||||
}, 100)
|
||||
},
|
||||
cancel: function () {
|
||||
this.isAdding = false
|
||||
this.updatingIndex = -1
|
||||
},
|
||||
confirm: function () {
|
||||
let that = this
|
||||
if (this.username.length == 0) {
|
||||
teaweb.warn("请输入用户名", function () {
|
||||
that.$refs.username.focus()
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.password.length == 0) {
|
||||
teaweb.warn("请输入密码", function () {
|
||||
that.$refs.password.focus()
|
||||
})
|
||||
return
|
||||
}
|
||||
if (this.updatingIndex < 0) {
|
||||
this.users.push({
|
||||
username: this.username,
|
||||
password: this.password
|
||||
})
|
||||
} else {
|
||||
this.users[this.updatingIndex].username = this.username
|
||||
this.users[this.updatingIndex].password = this.password
|
||||
}
|
||||
this.cancel()
|
||||
},
|
||||
update: function (index, user) {
|
||||
this.updatingIndex = index
|
||||
|
||||
this.isAdding = true
|
||||
this.username = user.username
|
||||
this.password = user.password
|
||||
|
||||
let that = this
|
||||
setTimeout(function () {
|
||||
that.$refs.username.focus()
|
||||
}, 100)
|
||||
},
|
||||
remove: function (index) {
|
||||
this.users.$remove(index)
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="hidden" name="httpAuthBasicAuthUsersJSON" :value="JSON.stringify(users)"/>
|
||||
<div v-if="users.length > 0">
|
||||
<div class="ui label small basic" v-for="(user, index) in users">
|
||||
{{user.username}} <a href="" title="修改" @click.prevent="update(index, user)"><i class="icon pencil tiny"></i></a>
|
||||
<a href="" title="删除" @click.prevent="remove(index)"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
<div class="ui divider"></div>
|
||||
</div>
|
||||
<div v-show="isAdding">
|
||||
<div class="ui fields inline">
|
||||
<div class="ui field">
|
||||
<input type="text" placeholder="用户名" v-model="username" size="15" ref="username"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<input type="password" placeholder="密码" v-model="password" size="15" ref="password"/>
|
||||
</div>
|
||||
<div class="ui field">
|
||||
<button class="ui button tiny" type="button" @click.prevent="confirm">确定</button>
|
||||
<a href="" title="取消" @click.prevent="cancel"><i class="icon remove small"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!isAdding" style="margin-top: 1em">
|
||||
<button class="ui button tiny" type="button" @click.prevent="add">+</button>
|
||||
</div>
|
||||
</div>`
|
||||
})
|
||||
@@ -25,23 +25,36 @@ Vue.component("http-auth-config-box", {
|
||||
teaweb.popup("/servers/server/settings/access/createPopup", {
|
||||
callback: function (resp) {
|
||||
that.authConfig.policyRefs.push(resp.data.policyRef)
|
||||
}
|
||||
},
|
||||
height: "28em"
|
||||
})
|
||||
},
|
||||
update: function (index, policyId) {
|
||||
let that = this
|
||||
teaweb.popup("/servers/server/settings/access/updatePopup?policyId=" + policyId, {
|
||||
callback: function (resp) {
|
||||
Vue.set(that.authConfig.policyRefs, index, resp.data.policyRef)
|
||||
}
|
||||
teaweb.success("保存成功", function () {
|
||||
teaweb.reload()
|
||||
})
|
||||
},
|
||||
height: "28em"
|
||||
})
|
||||
},
|
||||
delete: function (index) {
|
||||
that.authConfig.policyRefs.$remove(index)
|
||||
remove: function (index) {
|
||||
this.authConfig.policyRefs.$remove(index)
|
||||
},
|
||||
methodName: function (methodType) {
|
||||
switch (methodType) {
|
||||
case "basicAuth":
|
||||
return "BasicAuth"
|
||||
case "subRequest":
|
||||
return "子请求"
|
||||
}
|
||||
return ""
|
||||
}
|
||||
},
|
||||
template: `<div>
|
||||
<input type="text" name="authJSON" :value="JSON.stringify(authConfig)"/>
|
||||
<input type="hidden" name="authJSON" :value="JSON.stringify(authConfig)"/>
|
||||
<table class="ui table selectable definition">
|
||||
<prior-checkbox :v-config="authConfig" v-if="vIsLocation"></prior-checkbox>
|
||||
<tbody v-show="!vIsLocation || authConfig.isPrior">
|
||||
@@ -57,24 +70,43 @@ Vue.component("http-auth-config-box", {
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="margin"></div>
|
||||
<!-- 认证方法 -->
|
||||
<div>
|
||||
<!-- 认证方式 -->
|
||||
<div v-show="isOn()">
|
||||
<h4>认证方式</h4>
|
||||
<table class="ui table selectable celled" v-show="authConfig.policyRefs.length > 0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>认证方法</th>
|
||||
<th class="three wide">名称</th>
|
||||
<th class="three wide">认证方法</th>
|
||||
<th>参数</th>
|
||||
<th class="two wide">状态</th>
|
||||
<th class="two op">操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody v-for="ref in authConfig.policyRefs" :key="ref.authPolicyId">
|
||||
<tbody v-for="(ref, index) in authConfig.policyRefs" :key="ref.authPolicyId">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>{{ref.authPolicy.name}}</td>
|
||||
<td>
|
||||
{{methodName(ref.authPolicy.type)}}
|
||||
</td>
|
||||
<td>
|
||||
<span v-if="ref.authPolicy.type == 'basicAuth'">{{ref.authPolicy.params.users.length}}个用户</span>
|
||||
<span v-if="ref.authPolicy.type == 'subRequest'">
|
||||
<span v-if="ref.authPolicy.params.method.length > 0" class="grey">[{{ref.authPolicy.params.method}}]</span>
|
||||
{{ref.authPolicy.params.url}}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<label-on :v-is-on="ref.authPolicy.isOn"></label-on>
|
||||
</td>
|
||||
<td>
|
||||
<a href="" @click.prevent="update(index, ref.authPolicyId)">修改</a>
|
||||
<a href="" @click.prevent="remove(index)">删除</a>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<button class="ui button small" type="button" @click.prevent="add">+添加认证</button>
|
||||
<button class="ui button small" type="button" @click.prevent="add">+添加认证方式</button>
|
||||
</div>
|
||||
<div class="margin"></div>
|
||||
</div>`
|
||||
|
||||
@@ -1,33 +1,80 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>创建认证</h3>
|
||||
<h3>创建认证方式</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
|
||||
<table class="ui table definitions selectable">
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50"/>
|
||||
<input type="text" name="name" maxlength="50" ref="focus"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>类型 *</td>
|
||||
<td>认证类型 *</td>
|
||||
<td>
|
||||
|
||||
<select class="ui dropdown auto-width" name="type" v-model="type" @change="changeType">
|
||||
<option value="">[认证类型]</option>
|
||||
<option v-for="authType in authTypes" :value="authType.code">{{authType.name}}</option>
|
||||
</select>
|
||||
<p class="comment" v-html="authDescription"></p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- BasicAuth -->
|
||||
<tbody>
|
||||
<tbody v-show="type == 'basicAuth'">
|
||||
<tr>
|
||||
<td></td>
|
||||
<td>用户 *</td>
|
||||
<td>
|
||||
<http-auth-basic-auth-user-box></http-auth-basic-auth-user-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<a href="" @click.prevent="showMoreBasicAuthOptions()">更多选项<i class="ui icon angle" :class="{up: moreBasicAuthOptionsVisible, down: !moreBasicAuthOptionsVisible}"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="moreBasicAuthOptionsVisible">
|
||||
<td>认证领域名<em>(Realm)</em></td>
|
||||
<td>
|
||||
<input type="text" name="basicAuthRealm" value="" maxlength="100"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="moreBasicAuthOptionsVisible">
|
||||
<td>字符集</td>
|
||||
<td>
|
||||
<input type="text" name="basicAuthCharset" style="width: 6em" maxlength="50"/>
|
||||
<p class="comment">类似于<code-label>UTF-8</code-label>。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- SubRequest -->
|
||||
<tbody>
|
||||
|
||||
<tbody v-show="type == 'subRequest'">
|
||||
<tr>
|
||||
<td>子请求URL *</td>
|
||||
<td>
|
||||
<input type="text" name="subRequestURL" maxlength="1024"/>
|
||||
<p class="comment">可以是一个完整的URL,也可以是一个路径。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>请求方法</td>
|
||||
<td>
|
||||
<radio name="subRequestFollowRequest" :v-value="1" v-model="subRequestFollowRequest">同当前请求一致</radio>
|
||||
<radio name="subRequestFollowRequest" :v-value="0" v-model="subRequestFollowRequest">自定义</radio>
|
||||
<div style="margin-top: 0.8em" v-show="subRequestFollowRequest == 0">
|
||||
<div class="ui divider"></div>
|
||||
<select class="ui dropdown auto-width" name="subRequestMethod">
|
||||
<option value="POST">POST</option>
|
||||
<option value="GET">GET</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -1,3 +1,32 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.type = ""
|
||||
this.authDescription = ""
|
||||
|
||||
this.changeType = function () {
|
||||
let that = this
|
||||
let authType = this.authTypes.$find(function (k, v) {
|
||||
return v.code == that.type
|
||||
})
|
||||
if (authType != null) {
|
||||
this.authDescription = authType.description
|
||||
} else {
|
||||
this.authDescription = ""
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 基本认证
|
||||
*/
|
||||
this.moreBasicAuthOptionsVisible = false
|
||||
|
||||
this.showMoreBasicAuthOptions = function () {
|
||||
this.moreBasicAuthOptionsVisible = !this.moreBasicAuthOptionsVisible
|
||||
}
|
||||
|
||||
/**
|
||||
* 子请求
|
||||
*/
|
||||
this.subRequestFollowRequest = 1
|
||||
})
|
||||
@@ -4,6 +4,8 @@
|
||||
|
||||
<div class="right-box">
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="webId" :value="webId">
|
||||
<http-auth-config-box :v-auth-config="authConfig"></http-auth-config-box>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
@@ -0,0 +1,85 @@
|
||||
{$layout "layout_popup"}
|
||||
|
||||
<h3>修改认证方式</h3>
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="policyId" :value="policy.id"/>
|
||||
|
||||
<table class="ui table definition selectable">
|
||||
<tr>
|
||||
<td class="title">名称 *</td>
|
||||
<td>
|
||||
<input type="text" name="name" maxlength="50" ref="focus" v-model="policy.name"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>认证类型 *</td>
|
||||
<td>
|
||||
{{policy.typeName}}
|
||||
<p class="comment" v-html="authDescription"></p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- BasicAuth -->
|
||||
<tbody v-show="type == 'basicAuth'">
|
||||
<tr>
|
||||
<td>用户 *</td>
|
||||
<td>
|
||||
<http-auth-basic-auth-user-box :v-users="policy.params.users"></http-auth-basic-auth-user-box>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<a href="" @click.prevent="showMoreBasicAuthOptions()">更多选项<i class="ui icon angle" :class="{up: moreBasicAuthOptionsVisible, down: !moreBasicAuthOptionsVisible}"></i></a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="moreBasicAuthOptionsVisible">
|
||||
<td>认证领域名<em>(Realm)</em></td>
|
||||
<td>
|
||||
<input type="text" name="basicAuthRealm" value="" maxlength="100" v-model="policy.params.realm"/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-show="moreBasicAuthOptionsVisible">
|
||||
<td>字符集</td>
|
||||
<td>
|
||||
<input type="text" name="basicAuthCharset" style="width: 6em" v-model="policy.params.charset" maxlength="50"/>
|
||||
<p class="comment">类似于<code-label>utf-8</code-label>。</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
<!-- SubRequest -->
|
||||
<tbody v-show="type == 'subRequest'">
|
||||
<tr>
|
||||
<td>子请求URL *</td>
|
||||
<td>
|
||||
<input type="text" name="subRequestURL" maxlength="1024" v-model="policy.params.url"/>
|
||||
<p class="comment">可以是一个完整的URL,也可以是一个路径。</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>请求方法</td>
|
||||
<td>
|
||||
<radio name="subRequestFollowRequest" :v-value="1" v-model="subRequestFollowRequest">同当前请求一致</radio>
|
||||
<radio name="subRequestFollowRequest" :v-value="0" v-model="subRequestFollowRequest">自定义</radio>
|
||||
<div style="margin-top: 0.8em" v-show="subRequestFollowRequest == 0">
|
||||
<div class="ui divider"></div>
|
||||
<select class="ui dropdown auto-width" name="subRequestMethod" v-model="policy.params.method">
|
||||
<option value="">[请选择]</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="GET">GET</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="HEAD">HEAD</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tr>
|
||||
<td>是否启用</td>
|
||||
<td><checkbox name="isOn" value="1" v-model="policy.isOn"></checkbox></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
@@ -0,0 +1,37 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyPopup
|
||||
|
||||
this.type = this.policy.type
|
||||
this.authDescription = ""
|
||||
|
||||
this.$delay(function () {
|
||||
this.changeType()
|
||||
})
|
||||
|
||||
this.changeType = function () {
|
||||
let that = this
|
||||
let authType = this.authTypes.$find(function (k, v) {
|
||||
return v.code == that.type
|
||||
})
|
||||
if (authType != null) {
|
||||
this.policy.typeName = authType.name
|
||||
this.authDescription = authType.description
|
||||
} else {
|
||||
this.authDescription = ""
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 基本认证
|
||||
*/
|
||||
this.moreBasicAuthOptionsVisible = false
|
||||
|
||||
this.showMoreBasicAuthOptions = function () {
|
||||
this.moreBasicAuthOptionsVisible = !this.moreBasicAuthOptionsVisible
|
||||
}
|
||||
|
||||
/**
|
||||
* 子请求
|
||||
*/
|
||||
this.subRequestFollowRequest = (this.policy.params.method != null && this.policy.params.method.length > 0) ? 0 : 1
|
||||
})
|
||||
@@ -1,13 +1,16 @@
|
||||
{$layout}
|
||||
|
||||
{$template "/left_menu"}
|
||||
|
||||
<div class="right-box">
|
||||
{$template "../location_menu"}
|
||||
{$template "../left_menu"}
|
||||
{$template "../location_menu"}
|
||||
{$template "../left_menu"}
|
||||
|
||||
<div class="right-box tiny">
|
||||
<div class="margin"></div>
|
||||
<p class="ui message">此功能暂未开放,敬请期待。</p>
|
||||
</div>
|
||||
<div class="right-box tiny">
|
||||
<form class="ui form" data-tea-action="$" data-tea-success="success">
|
||||
<csrf-token></csrf-token>
|
||||
<input type="hidden" name="webId" :value="webId">
|
||||
<http-auth-config-box :v-auth-config="authConfig" :v-is-location="true"></http-auth-config-box>
|
||||
<submit-btn></submit-btn>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,3 @@
|
||||
Tea.context(function () {
|
||||
this.success = NotifyReloadSuccess("保存成功")
|
||||
})
|
||||
Reference in New Issue
Block a user