add oauth loginlog & fix bugs
This commit is contained in:
ljw
@@ -36,11 +36,3 @@ export function remove (data) {
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function changePwd (data) {
|
||||
return request({
|
||||
url: '/group/changePwd',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function list (params) {
|
||||
return request({
|
||||
url: '/login_log/list',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function remove (data) {
|
||||
return request({
|
||||
url: '/login_log/delete',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function info (params) {
|
||||
return request({
|
||||
url: '/oauth/info',
|
||||
params,
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
export function confirm (data) {
|
||||
return request({
|
||||
url: '/oauth/confirm',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function bind (data) {
|
||||
return request({
|
||||
url: '/oauth/bind',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function bindConfirm (data) {
|
||||
return request({
|
||||
url: '/oauth/bindConfirm',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
export function unbind (data) {
|
||||
return request({
|
||||
url: '/oauth/unbind',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
export function list (params) {
|
||||
return request({
|
||||
url: '/oauth/list',
|
||||
params,
|
||||
})
|
||||
}
|
||||
|
||||
export function detail (id) {
|
||||
return request({
|
||||
url: `/oauth/detail/${id}`,
|
||||
})
|
||||
}
|
||||
|
||||
export function create (data) {
|
||||
return request({
|
||||
url: '/oauth/create',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function update (data) {
|
||||
return request({
|
||||
url: '/oauth/update',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function remove (data) {
|
||||
return request({
|
||||
url: '/oauth/delete',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
@@ -36,11 +36,3 @@ export function remove (data) {
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function changePwd (data) {
|
||||
return request({
|
||||
url: '/peer/changePwd',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -37,10 +37,3 @@ export function remove (data) {
|
||||
})
|
||||
}
|
||||
|
||||
export function changePwd (data) {
|
||||
return request({
|
||||
url: '/tag/changePwd',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
@@ -67,3 +67,10 @@ export function changeCurPwd (data) {
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
||||
export function myOauth () {
|
||||
return request({
|
||||
url: '/user/myOauth',
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<el-dialog v-model="visible" width="50%">
|
||||
<el-form ref="cpwd" :model="changePwdForm" :rules="chagePwdRules" label-width="120px" style="margin-top: 20px">
|
||||
<el-form-item label="旧密码" prop="old_password">
|
||||
<el-input v-model="changePwdForm.old_password" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="new_password">
|
||||
<el-input v-model="changePwdForm.new_password" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPwd">
|
||||
<el-input v-model="changePwdForm.confirmPwd" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="cancelChangePwd">取消</el-button>
|
||||
<el-button type="primary" @click="changePassword">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { reactive, ref } from 'vue'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
import { changeCurPwd } from '@/api/user'
|
||||
import { useUserStore } from '@/store/user'
|
||||
|
||||
const props = defineProps({
|
||||
visible: Boolean,
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible'])
|
||||
|
||||
// Watch for changes to the prop and emit an event if necessary
|
||||
// watch(() => props.visible, (newVal) => {
|
||||
// emit('update:visible', newVal);
|
||||
// });
|
||||
const showChangePwd = () => {
|
||||
emit('update:visible', true)
|
||||
changePwdForm.old_password = ''
|
||||
changePwdForm.new_password = ''
|
||||
changePwdForm.confirmPwd = ''
|
||||
}
|
||||
const changePwdForm = reactive({
|
||||
old_password: '',
|
||||
new_password: '',
|
||||
confirmPwd: '',
|
||||
})
|
||||
const chagePwdRules = reactive({
|
||||
old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
|
||||
new_password: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === changePwdForm.old_password) {
|
||||
callback(new Error('新密码不能与旧密码相同'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
}],
|
||||
confirmPwd: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== changePwdForm.new_password) {
|
||||
callback(new Error('两次输入密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
const cpwd = ref(null)
|
||||
const cancelChangePwd = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const changePassword = async () => {
|
||||
//验证
|
||||
const valid = await cpwd.value.validate().catch(_ => false)
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
console.log('changePassword')
|
||||
const confirm = await ElMessageBox.confirm('确定修改密码么？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
}).catch(_ => false)
|
||||
if (!confirm) {
|
||||
return
|
||||
}
|
||||
const res = await changeCurPwd(changePwdForm).catch(_ => false)
|
||||
if (!res) {
|
||||
return
|
||||
}
|
||||
ElMessageBox.alert('修改成功', '修改密码', {
|
||||
autofocus: true,
|
||||
confirmButtonText: 'OK',
|
||||
callback: (action) => {
|
||||
userStore.logout()
|
||||
window.location.reload()
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -16,31 +16,14 @@
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<el-dialog v-model="changePwdVisible" width="50%">
|
||||
<el-form ref="cpwd" :model="changePwdForm" :rules="chagePwdRules" label-width="120px" style="margin-top: 20px">
|
||||
<el-form-item label="旧密码" prop="old_password">
|
||||
<el-input v-model="changePwdForm.old_password" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="new_password">
|
||||
<el-input v-model="changePwdForm.new_password" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPwd">
|
||||
<el-input v-model="changePwdForm.confirmPwd" show-password></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="changePwdVisible=false">取消</el-button>
|
||||
<el-button type="primary" @click="changePassword">确定</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<changePwdDialog v-model:visible="changePwdVisible"></changePwdDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { changeCurPwd } from '@/api/user'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { reactive, ref } from 'vue'
|
||||
import changePwdDialog from '@/components/changePwdDialog.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const user = userStore
|
||||
@@ -53,69 +36,6 @@
|
||||
const changePwdVisible = ref(false)
|
||||
const showChangePwd = () => {
|
||||
changePwdVisible.value = true
|
||||
changePwdForm.old_password = ''
|
||||
changePwdForm.new_password = ''
|
||||
changePwdForm.confirmPwd = ''
|
||||
}
|
||||
const changePwdForm = reactive({
|
||||
old_password: '',
|
||||
new_password: '',
|
||||
confirmPwd: '',
|
||||
})
|
||||
const chagePwdRules = reactive({
|
||||
old_password: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
|
||||
new_password: [
|
||||
{ required: true, message: '请输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === changePwdForm.old_password) {
|
||||
callback(new Error('新密码不能与旧密码相同'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
}],
|
||||
confirmPwd: [
|
||||
{ required: true, message: '请再次输入新密码', trigger: 'blur' },
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value !== changePwdForm.new_password) {
|
||||
callback(new Error('两次输入密码不一致'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
},
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
})
|
||||
const cpwd = ref(null)
|
||||
const changePassword = async () => {
|
||||
//验证
|
||||
const valid = await cpwd.value.validate().catch(_ => false)
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
console.log('changePassword')
|
||||
const confirm = await ElMessageBox.confirm('确定修改密码么？', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
}).catch(_ => false)
|
||||
if (!confirm) {
|
||||
return
|
||||
}
|
||||
const res = await changeCurPwd(changePwdForm).catch(_ => false)
|
||||
if (!res) {
|
||||
return
|
||||
}
|
||||
ElMessageBox.alert('修改成功', '修改密码', {
|
||||
autofocus: true,
|
||||
confirmButtonText: 'OK',
|
||||
callback: (action) => {
|
||||
logout()
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
+30
-4
@@ -13,7 +13,16 @@ const constantRoutes = [
|
||||
component: () => import('@/views/error-page/404.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
|
||||
{
|
||||
path: '/oauth/:code',
|
||||
component: () => import('@/views/oauth/login.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
{
|
||||
path: '/oauth/bind/:code',
|
||||
component: () => import('@/views/oauth/bind.vue'),
|
||||
hidden: true,
|
||||
},
|
||||
]
|
||||
export const asyncRoutes = [
|
||||
// {
|
||||
@@ -35,18 +44,24 @@ export const asyncRoutes = [
|
||||
{
|
||||
path: '/my',
|
||||
name: 'My',
|
||||
redirect: '/my/tag/index',
|
||||
redirect: '/my/info',
|
||||
meta: { title: '我的', icon: 'UserFilled' },
|
||||
component: () => import('@/layout/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'MyInfo',
|
||||
meta: { title: '个人信息', icon: 'User' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/info.vue'),
|
||||
},
|
||||
{
|
||||
path: 'address_book',
|
||||
name: 'MyAddressBookList',
|
||||
meta: { title: '地址簿管理', icon: 'Notebook' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/address_book/index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'tag/index',
|
||||
path: 'tag',
|
||||
name: 'MyTagList',
|
||||
meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/my/tag/index.vue'),
|
||||
@@ -103,7 +118,18 @@ export const asyncRoutes = [
|
||||
meta: { title: '标签管理', icon: 'CollectionTag' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/tag/index.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/oauth',
|
||||
name: 'Oauth',
|
||||
meta: { title: 'Oauth管理', icon: 'Link' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/oauth/index.vue'),
|
||||
},
|
||||
{
|
||||
path: '/loginLog',
|
||||
name: 'LoginLog',
|
||||
meta: { title: '登录日志', icon: 'List' /*keepAlive: true*/ },
|
||||
component: () => import('@/views/login/log.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import { reactive } from 'vue'
|
||||
import { list, remove } from '@/api/login_log'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
export function useRepositories () {
|
||||
const route = useRoute()
|
||||
const user_id = route.query?.user_id
|
||||
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
is_my: 0,
|
||||
user_id: user_id ? parseInt(user_id) : null,
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
listRes.loading = true
|
||||
const res = await list(listQuery).catch(_ => false)
|
||||
listRes.loading = false
|
||||
if (res) {
|
||||
listRes.list = res.data.list
|
||||
listRes.total = res.data.total
|
||||
}
|
||||
}
|
||||
const handlerQuery = () => {
|
||||
if (listQuery.page === 1) {
|
||||
getList()
|
||||
} else {
|
||||
listQuery.page = 1
|
||||
}
|
||||
}
|
||||
|
||||
const del = async (row) => {
|
||||
const cf = await ElMessageBox.confirm('确定删除么?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await remove({ id: row.id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success('操作成功')
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="60px">
|
||||
<el-form-item label="用户">
|
||||
<el-select v-model="listQuery.user_id" clearable>
|
||||
<el-option
|
||||
v-for="item in allUsers"
|
||||
:key="item.id"
|
||||
:label="item.username"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">筛选</el-button>
|
||||
<el-button type="danger" @click="toAdd">添加</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<!-- <el-tag type="danger" style="margin-bottom: 10px">不建议在此操作地址簿，可能会造成数据不同步</el-tag>-->
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center" width="100"/>
|
||||
<el-table-column label="所属用户" align="center" width="120">
|
||||
<template #default="{row}">
|
||||
<span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="client" label="client" align="center" width="120"/>
|
||||
<el-table-column prop="uuid" label="uuid" align="center"/>
|
||||
<el-table-column prop="ip" label="ip" align="center" width="150"/>
|
||||
<el-table-column prop="type" label="type" align="center" width="100"/>
|
||||
<el-table-column prop="platform" label="platform" align="center" width="120"/>
|
||||
<el-table-column prop="created_at" label="时间" align="center"/>
|
||||
<el-table-column label="操作" align="center" width="400">
|
||||
<template #default="{row}">
|
||||
<el-button type="danger" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onActivated, onMounted, watch } from 'vue'
|
||||
import { loadAllUsers } from '@/global'
|
||||
import { useRepositories } from '@/views/login/log.js'
|
||||
|
||||
const { allUsers, getAllUsers } = loadAllUsers()
|
||||
getAllUsers()
|
||||
|
||||
const {
|
||||
listRes,
|
||||
listQuery,
|
||||
getList,
|
||||
handlerQuery,
|
||||
del,
|
||||
} = useRepositories()
|
||||
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.list-query .el-select {
|
||||
--el-select-width: 160px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@@ -28,9 +28,22 @@
|
||||
const userStore = useUserStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
let platform = window.navigator.platform
|
||||
if (navigator.platform.indexOf('Mac') === 0) {
|
||||
platform = 'mac'
|
||||
} else if (navigator.platform.indexOf('Win') === 0) {
|
||||
platform = 'windows'
|
||||
} else if (navigator.platform.indexOf('Linux armv') === 0) {
|
||||
platform = 'android'
|
||||
} else if (navigator.platform.indexOf('Linux') === 0) {
|
||||
platform = 'linux'
|
||||
}
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
platform: platform,
|
||||
})
|
||||
const redirect = route.query?.redirect
|
||||
const login = async () => {
|
||||
@@ -50,12 +63,13 @@
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.login {
|
||||
.login {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #2d3a4b;
|
||||
padding-top: 200px;
|
||||
padding-top: 25vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
@@ -63,11 +77,12 @@
|
||||
}
|
||||
|
||||
.login-card {
|
||||
width: 500px;
|
||||
max-width: 500px;
|
||||
background-color: #283342;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
|
||||
.el-form-item {
|
||||
|
||||
::v-deep(.el-form-item__label) {
|
||||
@@ -87,5 +102,5 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card title="个人信息">
|
||||
<el-form class="info-form" ref="form" label-width="120px" label-suffix="：">
|
||||
<el-form-item label="用户名">
|
||||
<div>{{ userStore.username }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-button type="danger" @click="showChangePwd">修改密码</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="OIDC">
|
||||
<el-table :data="oidcData" border fit>
|
||||
<el-table-column label="平台" prop="third_type" align="center"></el-table-column>
|
||||
<el-table-column label="状态" prop="status" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.status === 1" type="success">已绑定</el-tag>
|
||||
<el-tag v-else type="danger">未绑定</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="200">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.status === 1" type="danger" size="small" @click="toUnBind(row)">解除绑定</el-button>
|
||||
<el-button v-else type="success" size="small" @click="toBind(row)">去绑定</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<changePwdDialog v-model:visible="changePwdVisible"></changePwdDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import changePwdDialog from '@/components/changePwdDialog.vue'
|
||||
import { ref } from 'vue'
|
||||
import { useUserStore } from '@/store/user'
|
||||
import { bind, unbind } from '@/api/oauth'
|
||||
import { myOauth } from '@/api/user'
|
||||
import { ElMessageBox } from 'element-plus'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const changePwdVisible = ref(false)
|
||||
const showChangePwd = () => {
|
||||
changePwdVisible.value = true
|
||||
}
|
||||
const oidcData = ref([])
|
||||
const getMyOauth = async () => {
|
||||
const res = await myOauth().catch(_ => false)
|
||||
if (res) {
|
||||
oidcData.value = res.data
|
||||
}
|
||||
|
||||
}
|
||||
getMyOauth()
|
||||
const toBind = async (row) => {
|
||||
const res = await bind({ op: row.third_type }).catch(_ => false)
|
||||
if (res) {
|
||||
const { code, url } = res.data
|
||||
window.open(url)
|
||||
}
|
||||
}
|
||||
const toUnBind = async (row) => {
|
||||
const cf = await ElMessageBox.confirm('确定解除绑定么?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
const res = await unbind({ op: row.third_type }).catch(_ => false)
|
||||
if (res) {
|
||||
getMyOauth()
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.info-form {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="oauth">
|
||||
<el-card class="card">
|
||||
<h2>您正在授权绑定</h2>
|
||||
<el-form class="info" label-width="100px">
|
||||
<el-form-item label="平台">
|
||||
<div class="impt">{{ oauthInfo.op }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户名">
|
||||
<div class="impt">{{ oauthInfo.third_name }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">绑定</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button style="width: 100%" size="large" @click="out">关闭页面</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
如果不是您操作的授权，请直接关闭页面
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { info, confirm, bindConfirm } from '@/api/oauth'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const oauthInfo = ref({})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const code = route.params?.code
|
||||
if (!code) {
|
||||
router.push('/')
|
||||
}
|
||||
const getInfo = async () => {
|
||||
const res = await info({ code }).catch(_ => false)
|
||||
if (res) {
|
||||
oauthInfo.value = res.data
|
||||
} else {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
getInfo()
|
||||
const resStatus = ref(0)
|
||||
const toConfirm = async () => {
|
||||
const res = await bindConfirm({ code }).catch(_ => false)
|
||||
if (res) {
|
||||
resStatus.value = 1
|
||||
ElMessage.success('操作成功,3秒后将自动关闭本页面')
|
||||
setTimeout(_ => {
|
||||
out()
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
const out = () => {
|
||||
window.close()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.oauth {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #2d3a4b;
|
||||
padding-top: 25vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card {
|
||||
max-width: 500px;
|
||||
background-color: #283342;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
::v-deep(.el-form-item__label) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.impt {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-card class="list-query" shadow="hover">
|
||||
<el-form inline label-width="60px">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handlerQuery">筛选</el-button>
|
||||
<el-button type="danger" @click="toAdd">添加</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
<el-card class="list-body" shadow="hover">
|
||||
<el-table :data="listRes.list" v-loading="listRes.loading" border>
|
||||
<el-table-column prop="id" label="id" align="center"/>
|
||||
<el-table-column prop="op" label="名称" align="center"/>
|
||||
<el-table-column prop="auto_register" label="自动注册" align="center"/>
|
||||
<el-table-column prop="created_at" label="创建时间" align="center"/>
|
||||
<el-table-column prop="updated_at" label="更新时间" align="center"/>
|
||||
<el-table-column label="操作" align="center">
|
||||
<template #default="{row}">
|
||||
<el-button @click="toEdit(row)">编辑</el-button>
|
||||
<el-button type="danger" @click="del(row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
<el-card class="list-page" shadow="hover">
|
||||
<el-pagination background
|
||||
layout="prev, pager, next, sizes, jumper"
|
||||
:page-sizes="[10,20,50,100]"
|
||||
v-model:page-size="listQuery.page_size"
|
||||
v-model:current-page="listQuery.page"
|
||||
:total="listRes.total">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
<el-dialog v-model="formVisible" :title="!formData.id?'创建':'修改'" width="800">
|
||||
<el-form class="dialog-form" ref="form" :model="formData" :rules="rules" label-width="120px">
|
||||
<el-form-item label="ClientId" prop="client_id">
|
||||
<el-input v-model="formData.client_id"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="ClientSecret" prop="client_secret">
|
||||
<el-input v-model="formData.client_secret"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="RedirectUrl" prop="redirect_url">
|
||||
<el-input v-model="formData.redirect_url"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="op" >
|
||||
<el-radio-group v-model="formData.op" :disabled="!!formData.id">
|
||||
<el-radio v-for="item in ops" :key="item.value" :label="item.value" style="display: block">
|
||||
{{ item.label }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="自动注册" prop="open_auto_register">
|
||||
<el-switch v-model="formData.auto_register"
|
||||
:active-value="true"
|
||||
:inactive-value="false"
|
||||
></el-switch>
|
||||
<div style="display: block;margin-left: 10px">如果开启,当用户使用oauth登录而没绑定时,会自动注册一个账号</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="formVisible = false">取消</el-button>
|
||||
<el-button @click="submit" type="primary">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, watch, ref, onActivated } from 'vue'
|
||||
import { list, create, update, detail, remove } from '@/api/oauth'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
|
||||
const listRes = reactive({
|
||||
list: [], total: 0, loading: false,
|
||||
})
|
||||
const listQuery = reactive({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
})
|
||||
const ops = [
|
||||
{ value: 'github', label: 'Github' },
|
||||
]
|
||||
const getList = async () => {
|
||||
listRes.loading = true
|
||||
const res = await list(listQuery).catch(_ => false)
|
||||
listRes.loading = false
|
||||
if (res) {
|
||||
listRes.list = res.data.list
|
||||
listRes.total = res.data.total
|
||||
}
|
||||
}
|
||||
const handlerQuery = () => {
|
||||
if (listQuery.page === 1) {
|
||||
getList()
|
||||
} else {
|
||||
listQuery.page = 1
|
||||
}
|
||||
}
|
||||
|
||||
const del = async (row) => {
|
||||
const cf = await ElMessageBox.confirm('确定删除么?', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}).catch(_ => false)
|
||||
if (!cf) {
|
||||
return false
|
||||
}
|
||||
|
||||
const res = await remove({ id: row.id }).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success('操作成功')
|
||||
getList()
|
||||
}
|
||||
}
|
||||
onMounted(getList)
|
||||
onActivated(getList)
|
||||
|
||||
watch(() => listQuery.page, getList)
|
||||
|
||||
watch(() => listQuery.page_size, handlerQuery)
|
||||
|
||||
const formVisible = ref(false)
|
||||
const formData = reactive({
|
||||
id: 0,
|
||||
op: '',
|
||||
client_id: '',
|
||||
client_secret: '',
|
||||
redirect_url: '',
|
||||
auto_register: false,
|
||||
})
|
||||
const rules = {
|
||||
client_id: [{ required: true, message: '请输入ClientId', trigger: 'blur' }],
|
||||
client_secret: [{ required: true, message: '请输入ClientSecret', trigger: 'blur' }],
|
||||
redirect_url: [{ required: true, message: '请输入RedirectUrl', trigger: 'blur' }],
|
||||
op: [{ required: true, message: '请选择类型', trigger: 'blur' }],
|
||||
}
|
||||
const toEdit = (row) => {
|
||||
formVisible.value = true
|
||||
formData.id = row.id
|
||||
formData.op = row.op
|
||||
formData.client_id = row.client_id
|
||||
formData.client_secret = row.client_secret
|
||||
formData.redirect_url = row.redirect_url
|
||||
formData.auto_register = row.auto_register
|
||||
|
||||
}
|
||||
const toAdd = () => {
|
||||
formVisible.value = true
|
||||
formData.id = 0
|
||||
formData.op = ''
|
||||
formData.client_id = ''
|
||||
formData.client_secret = ''
|
||||
formData.redirect_url = ''
|
||||
formData.auto_register = false
|
||||
}
|
||||
const form = ref(null)
|
||||
const submit = async () => {
|
||||
const v = await form.value.validate().catch(err => false)
|
||||
if (!v) {
|
||||
return
|
||||
}
|
||||
const api = formData.id ? update : create
|
||||
const res = await api(formData).catch(_ => false)
|
||||
if (res) {
|
||||
ElMessage.success('操作成功')
|
||||
formVisible.value = false
|
||||
getList()
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="oauth">
|
||||
<el-card class="card">
|
||||
<h2>您正在授权登录</h2>
|
||||
<el-form class="info" label-width="100px">
|
||||
<el-form-item label="设备">
|
||||
<div class="impt">{{ oauthInfo.device_name }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="ID">
|
||||
<div class="impt">{{ oauthInfo.id }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button style="width: 100%" v-if="!resStatus" type="success" size="large" @click="toConfirm">授权登录</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label-width="0">
|
||||
<el-button style="width: 100%" size="large" @click="out">关闭页面</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
如果不是您操作的授权，请直接关闭页面
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { info, confirm } from '@/api/oauth'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const oauthInfo = ref({})
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const code = route.params?.code
|
||||
if (!code) {
|
||||
// router.push('/')
|
||||
}
|
||||
const getInfo = async () => {
|
||||
const res = await info({ code }).catch(_ => false)
|
||||
if (res) {
|
||||
oauthInfo.value = res.data
|
||||
} else {
|
||||
// router.push('/')
|
||||
}
|
||||
}
|
||||
getInfo()
|
||||
const resStatus = ref(0)
|
||||
const toConfirm = async () => {
|
||||
const res = await confirm({ code }).catch(_ => false)
|
||||
if (res) {
|
||||
resStatus.value = 1
|
||||
ElMessage.success('操作成功,3秒后将自动关闭本页面')
|
||||
setTimeout(_ => {
|
||||
out()
|
||||
}, 3000)
|
||||
}
|
||||
}
|
||||
const out = () => {
|
||||
window.close()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.oauth {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #2d3a4b;
|
||||
padding-top: 25vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
.card {
|
||||
max-width: 500px;
|
||||
background-color: #283342;
|
||||
color: #fff;
|
||||
border: none;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
|
||||
.info {
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
::v-deep(.el-form-item__label) {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.impt {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user