修改客户端UI, 添加获取token
This commit is contained in:
parent
ce471426a1
commit
6ed3118df1
|
|
@ -8,6 +8,7 @@ export {}
|
|||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
Countup: typeof import('./src/components/countup.vue')['default']
|
||||
ElAlert: typeof import('element-plus/es')['ElAlert']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCalendar: typeof import('element-plus/es')['ElCalendar']
|
||||
|
|
|
|||
|
|
@ -114,6 +114,19 @@ export const AdminDeleteUserRequestService = (Data) => {
|
|||
})
|
||||
}
|
||||
|
||||
export const GetUserTokenService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
let token = localStorage.getItem("token") || "";
|
||||
return request.post('/user/gen_user_token', params,{
|
||||
headers: {
|
||||
'token': token,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const UpdateUserCatalogueService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
|
|
|
|||
|
|
@ -97,12 +97,6 @@ export const menuData: Menus[] = [
|
|||
index: '/vpn-tunnel',
|
||||
title: '隧道配置',
|
||||
},
|
||||
{
|
||||
id: '754',
|
||||
pid: '75',
|
||||
index: '/vpn-client',
|
||||
title: 'VPN客户端UI',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
@ -270,6 +264,12 @@ export const menuData: Menus[] = [
|
|||
index: '/gen-prompt',
|
||||
title: '提示词生成',
|
||||
},
|
||||
{
|
||||
id: '754',
|
||||
icon: 'Connection',
|
||||
index: '/vpn-client',
|
||||
title: 'VPN客户端UI',
|
||||
},
|
||||
// {
|
||||
// id: '57',
|
||||
// icon: 'ChatDotSquare',
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export const usePermissStore = defineStore("permiss", {
|
|||
"753", //VPN隧道管理
|
||||
"754", //VPN客户端UI
|
||||
],
|
||||
user: ["0", "8", "7", "9", "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "75", "754"],
|
||||
user: ["0", "8", "7", "9", "51" ,"53","55" ,"56", "57", "58", "59", "61", "71", "754"],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -74,6 +74,9 @@
|
|||
<el-button type="primary" link @click="append_group(data)" v-if="data.type != 0">
|
||||
添加用户组
|
||||
</el-button>
|
||||
<el-button type="primary" link @click="show_get_token_visible(data)" v-if="data.type == 0">
|
||||
获取token
|
||||
</el-button>
|
||||
<el-button
|
||||
style="margin-left: 4px"
|
||||
type="danger"
|
||||
|
|
@ -90,6 +93,59 @@
|
|||
|
||||
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="获取用户Token" v-model="getTokenVisible" width="500px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeTokenDialog">
|
||||
<div>
|
||||
<el-form :model="getTokenParams" label-width="120px">
|
||||
<el-form-item label="用户ID：">
|
||||
<el-input v-model="getTokenParams.user_id" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="访问令牌有效期：">
|
||||
<el-input-number v-model="getTokenParams.expire_in" :min="60" :max="8640000" :step="60" />
|
||||
<span style="margin-left: 10px;">秒 (默认3600秒)</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="刷新令牌有效期：">
|
||||
<el-input-number v-model="getTokenParams.refresh_expire_in" :min="300" :max="60480000" :step="300" />
|
||||
<span style="margin-left: 10px;">秒 (默认86400秒)</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row style="margin-top: 20px; text-align: center;">
|
||||
<el-button type="primary" @click="getTokenCode" :loading="tokenLoading">获取Token</el-button>
|
||||
</el-row>
|
||||
|
||||
<!-- Token结果显示区域 -->
|
||||
<div v-if="tokenResult" style="margin-top: 20px;">
|
||||
<el-divider>获取结果</el-divider>
|
||||
<el-form :model="tokenResult" label-width="100px">
|
||||
<el-form-item label="访问Token：">
|
||||
<el-input
|
||||
v-model="tokenResult.access_token"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
readonly
|
||||
style="font-family: monospace;"
|
||||
/>
|
||||
<el-button type="text" @click="copyToClipboard(tokenResult.access_token)">复制</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="刷新Token：">
|
||||
<el-input
|
||||
v-model="tokenResult.refresh_token"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
readonly
|
||||
style="font-family: monospace;"
|
||||
/>
|
||||
<el-button type="text" @click="copyToClipboard(tokenResult.refresh_token)">复制</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div v-if="tokenError" style="margin-top: 20px;">
|
||||
<el-alert :title="tokenError" type="error" show-icon />
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -99,7 +155,7 @@ import { ElMessage } from 'element-plus';
|
|||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { UserInfo } from '@/types/user';
|
||||
import { fetchUserData } from '@/api';
|
||||
import { SearchUserService,AdminAddUserRequestService,UpdateUserCatalogueService,AdminDeleteUserRequestService,AdminAddUserGroupRequestService } from "@/api/user";
|
||||
import { SearchUserService,AdminAddUserRequestService,UpdateUserCatalogueService,AdminDeleteUserRequestService,AdminAddUserGroupRequestService,GetUserTokenService } from "@/api/user";
|
||||
import {GetUserInfoService} from "@/api/user";
|
||||
import {updateUserInfoService} from "@/api/user";
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
|
|
@ -131,11 +187,77 @@ const query = reactive({
|
|||
name: '',
|
||||
});
|
||||
|
||||
const getTokenVisible = ref(false);
|
||||
|
||||
const getTokenParams = ref({
|
||||
"expire_in": 3600,
|
||||
"refresh_expire_in": 86400,
|
||||
"user_id": 0,
|
||||
})
|
||||
|
||||
const tokenLoading = ref(false)
|
||||
const tokenResult = ref(null)
|
||||
const tokenError = ref('')
|
||||
|
||||
const getTokenCode = async () => {
|
||||
tokenLoading.value = true
|
||||
tokenError.value = ''
|
||||
tokenResult.value = null
|
||||
|
||||
try {
|
||||
const response = await GetUserTokenService({
|
||||
user_id: getTokenParams.value.user_id,
|
||||
expire_in: getTokenParams.value.expire_in,
|
||||
refresh_expire_in: getTokenParams.value.refresh_expire_in
|
||||
})
|
||||
|
||||
if (response["code"] === 0) {
|
||||
tokenResult.value = response.data
|
||||
ElMessage.success('获取Token成功')
|
||||
} else {
|
||||
tokenError.value = '获取失败: ' + response["message"]
|
||||
ElMessage.error(tokenError.value)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取Token失败:', error)
|
||||
tokenError.value = '获取Token失败: ' + error.message
|
||||
ElMessage.error(tokenError.value)
|
||||
} finally {
|
||||
tokenLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const copyToClipboard = async (text) => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(text)
|
||||
ElMessage.success('已复制到剪贴板')
|
||||
} catch (err) {
|
||||
console.error('复制失败:', err)
|
||||
ElMessage.error('复制失败')
|
||||
}
|
||||
}
|
||||
|
||||
const closeTokenDialog = () => {
|
||||
tokenResult.value = null
|
||||
tokenError.value = ''
|
||||
getTokenParams.value = {
|
||||
"expire_in": 3600,
|
||||
"refresh_expire_in": 86400,
|
||||
"user_id": 0,
|
||||
}
|
||||
}
|
||||
|
||||
const showUserTreeVisibale = async () => {
|
||||
await GetAllDefaultUsers();
|
||||
visible_system.value = true;
|
||||
};
|
||||
|
||||
const show_get_token_visible = (data) => {
|
||||
currentNode.value = data;
|
||||
getTokenVisible.value = true;
|
||||
getTokenParams.value.user_id = data.id;
|
||||
};
|
||||
|
||||
|
||||
const updateUserCatalogue = async (data) => {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -170,8 +170,11 @@ const connectToServer = async (server: VPNServer) => {
|
|||
|
||||
if (response && response["code"] === 0) {
|
||||
ElMessage.success('VPN连接成功！')
|
||||
} else if (response && response["code"] === 20){
|
||||
//设置已在线
|
||||
ElMessage.error(response["message"])
|
||||
} else {
|
||||
ElMessage.error(response["message"] || 'VPN连接失败')
|
||||
ElMessage.error(response["message"])
|
||||
}
|
||||
} catch (error) {
|
||||
if (error !== 'cancel') {
|
||||
|
|
|
|||
Loading…
Reference in New Issue