From 8e4ab7acddbdb84fd755acf7e75cf471f50cba60 Mon Sep 17 00:00:00 2001
From: houzhongjian <houzhongyi@126.com>
Date: 星期四, 31 十月 2024 10:16:47 +0800
Subject: [PATCH] 优化部分页面及配置
---
src/views/Login/components/LoginForm.vue | 150 +++++++++++++++++++++++++++++++++-----------------
1 files changed, 99 insertions(+), 51 deletions(-)
diff --git a/src/views/Login/components/LoginForm.vue b/src/views/Login/components/LoginForm.vue
index f3df729..54faac0 100644
--- a/src/views/Login/components/LoginForm.vue
+++ b/src/views/Login/components/LoginForm.vue
@@ -64,14 +64,35 @@
/>
</el-form-item>
</el-col>
-<!-- <Verify-->
-<!-- ref="verify"-->
-<!-- :captchaType="captchaType"-->
-<!-- :imgSize="{ width: '400px', height: '200px' }"-->
-<!-- mode="pop"-->
-<!-- @success="handleLogin"-->
-<!-- />-->
+ <Verify
+ ref="verify"
+ :captchaType="captchaType"
+ :imgSize="{ width: '400px', height: '200px' }"
+ mode="pop"
+ @success="handleLogin"
+ />
</el-row>
+
+<!-- <!– 统一身份登录–>-->
+<!-- <el-divider content-position="center">统一身份登录</el-divider>-->
+<!-- <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
+<!-- <el-form-item>-->
+<!-- <el-row :gutter="10" justify="space-between" style="width: 100%">-->
+<!-- <el-col :span="8">-->
+<!-- <el-button type="primary" style="width: 100%;"-->
+<!-- @click="ssoPasswordLogin">-->
+<!-- {{ ssoLoginPasswordTitle }}-->
+<!-- </el-button>-->
+<!-- </el-col>-->
+<!-- <el-col :span="8">-->
+<!-- <el-button type="primary" style="width: 100%;"-->
+<!-- @click="ssoCodeLogin">-->
+<!-- {{ ssoLoginCodeTitle }}-->
+<!-- </el-button>-->
+<!-- </el-col>-->
+<!-- </el-row>-->
+<!-- </el-form-item>-->
+<!-- </el-col>-->
</el-form>
</template>
<script lang="ts" setup>
@@ -84,6 +105,7 @@
import * as authUtil from '@/utils/auth'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
+// import axios from "axios";
defineOptions({ name: 'LoginForm' })
@@ -96,7 +118,10 @@
const { currentRoute, push } = useRouter()
const redirect = ref<string>('')
const loginLoading = ref(false)
+// const ssoLoginPasswordTitle = ref('账号密码模式')
+// const ssoLoginCodeTitle = ref('授权码模式')
const verify = ref()
+const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
@@ -112,15 +137,35 @@
password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
scope: 'user.read user.write',
grantType: 'password',
+ captchaVerification: '',
rememberMe: true // 默认记录我。如果不需要，可手动修改
}
})
+
+// const ssoLoginData = reactive({
+// loginParam: {
+// username: '',
+// password: '',
+// token: ''
+// }
+// })
+//
+// const oauth2Token = reactive({
+// oauthParam: {
+// clientId: 'shasteel',
+// clientSecret: 'shasteel111111111111111',
+// grantType: 'password',
+// username: '',
+// password: '',
+// scope: ''
+// }
+// })
// 获取验证码
const getCode = async () => {
// 情况一，未开启：则直接登录
if (loginData.captchaEnable === 'false') {
- await handleLogin()
+ await handleLogin({})
} else {
// 情况二，已开启：则展示验证码；只有完成验证码的情况，才进行登录
// 弹出验证码
@@ -143,13 +188,14 @@
const loading = ref() // ElLoading.service 返回的实例
// 登录
-const handleLogin = async () => {
+const handleLogin = async (params) => {
loginLoading.value = true
try {
const data = await validForm()
if (!data) {
return
}
+ loginData.loginForm.captchaVerification = params.captchaVerification
const res = await LoginApi.login(loginData.loginForm)
if (!res) {
return
@@ -166,7 +212,7 @@
}
authUtil.setToken(res)
if (!redirect.value) {
- redirect.value = '/'
+ redirect.value = '/index'
}
// 判断是否为SSO登录
if (redirect.value.indexOf('sso') !== -1) {
@@ -180,41 +226,52 @@
}
}
-// 自动登录
-// const autoLogin = async (appid, username) => {
-// console.log(appid)
-// console.log(username)
-// loginLoading.value = true
-// try {
-// const res = await LoginApi.auth2Login(loginData.loginForm)
-// if (!res) {
-// return
+// const ssoPasswordLogin = () => {
+// // 发起请求
+// axios({
+// url: "http://localhost:48080/admin-api/system/oauth2/token?"
+// // 客户端
+// + "client_id=" + oauth2Token.oauthParam.clientId
+// + "&client_secret=" + oauth2Token.oauthParam.clientSecret
+// // 密码模式的参数
+// + "&grant_type=" + oauth2Token.oauthParam.grantType
+// + "&username=" + loginData.loginForm.username
+// + "&password=" + loginData.loginForm.password
+// + '&scope=user.read user.write',
+// method: 'POST',
+// headers: {
+// 'tenant-id': '172', // 多租户编号，写死
// }
-// loading.value = ElLoading.service({
-// lock: true,
-// text: '正在加载系统中...',
-// background: 'rgba(0, 0, 0, 0.7)'
-// })
-// if (loginData.loginForm.rememberMe) {
-// authUtil.setLoginForm(loginData.loginForm)
+// }).then((result) => {
+// const res = result.data
+// if (res.code !== 0) {
+// alert('授权失败，原因：' + res.msg)
+// return;
+// }
+// const auth_token = res.data.access_token
+// // 设置token
+// authUtil.setToken(res.data)
+// // 提示登录成功
+// alert('授权成功！校验系统用户及权限');
+// ssoLoginData.loginParam.token = auth_token
+// if (!!redirect.value) {
+// location.href = decodeURIComponent(redirect.value);
// } else {
-// authUtil.removeLoginForm()
+// push({ path: '/index' })
// }
-// authUtil.setToken(res)
-// if (!redirect.value) {
-// redirect.value = '/'
-// }
-// console.log(permissionStore)
-// // 判断是否为SSO登录
-// if (redirect.value.indexOf('sso') !== -1) {
-// window.location.href = window.location.href.replace('/login?redirect=', '')
-// } else {
-// push({ path: redirect.value })
-// }
-// } finally {
-// loginLoading.value = false
-// loading.value.close()
-// }
+// }).catch((e) => {
+// ElMessage.error('授权失败：' + e.message);
+// });
+// }
+
+// const ssoCodeLogin = () => {
+// alert('暂未开通');
+// // const clientId = 'shasteel';
+// // const redirectUri = encodeURIComponent('http://127.0.0.1:9000/callback');
+// // const responseType = 'code'; // 1）授权码模式，对应 code；2）简化模式，对应 token
+// // window.location.href = 'http://localhost/sso?client_id=' + clientId
+// // + '&redirect_uri=' + redirectUri
+// // + '&response_type=' + responseType;
// }
watch(
@@ -228,15 +285,6 @@
)
onMounted(() => {
getLoginFormCache()
- let params = new URLSearchParams(window.location.search);
- console.log(params)
- let appid = params.get('appid');
- let username = params.get('username');
- console.log(appid)
- console.log(username)
- // if(appid) {
- // autoLogin(appid, username)
- // }
})
</script>
--
Gitblit v1.9.3