feat: 登录联调

.env.development

@@ -1,4 +1,4 @@
 ## 开发环境
 NODE_ENV='development'
 # 测试接口
-VITE_BASE_API = 'http://test-admin-api'
+VITE_APP_BASE_API = 'http://api.boot.aizuda.com'

.env.production

@@ -1,4 +1,4 @@
 ## 生产环境
 NODE_ENV='production'
 # 生产接口
-VITE_APP_BASE_API = 'http://pro-admin-api'
+VITE_APP_BASE_API = 'http://api.boot.aizuda.com'

.env.staging

@@ -1,4 +1,4 @@
 ## 模拟环境
 NODE_ENV='staging'
 # 预发布接口
-VITE_APP_BASE_API = 'http://pre-admin-api'
+VITE_APP_BASE_API = 'http://api.boot.aizuda.com'

.env.test

@@ -1,5 +1,5 @@
 ## 测试环境
 NODE_ENV='production'
 # 测试接口
-VITE_APP_BASE_API = 'http://test-admin-api'
+VITE_APP_BASE_API = 'http://api.boot.aizuda.com'
 

src/api/login/index.ts

@@ -1,4 +1,3 @@
-import { GeetConfig, LoginFormData, GoogleLoginData, LoginResponseData } from '@/types'
 import request from '@/utils/request'
 import { AxiosPromise } from 'axios'
 
@@ -6,31 +5,15 @@ import { AxiosPromise } from 'axios'
  * 登录
  * @param data
  */
-export function login(data: LoginFormData): AxiosPromise<LoginResponseData> {
-	return Promise.resolve({
-		username: 'admin'
-	})
-	// return request({
-	// 	url: '/login',
-	// 	method: 'post',
-	// 	data
+export function login(data: any): AxiosPromise {
+	// return Promise.resolve({
+	// 	username: 'admin'
 	// })
-}
-
-/**
- * 谷歌验证
- * @param data
- */
-export function googleLogin(data: GoogleLoginData): AxiosPromise {
-	return Promise.resolve({
-		token: 'admin_token'
+	return request({
+		url: '/auth/login/system',
+		method: 'post',
+		data
 	})
-	// return request({
-	// 	url: '/google',
-	// 	method: 'post',
-	// 	data,
-	//   extraConfig: { showFullscreenLoading: true }
-	// })
 }
 
 /**
@@ -46,7 +29,7 @@ export function logout() {
 /**
  * Geetest配置参数
  */
-export function getGeetConfig(): AxiosPromise<GeetConfig> {
+export function getGeetConfig(): AxiosPromise {
 	return request({
 		url: `/passport/getgeetestconfig?t=${+new Date()}`,
 		method: 'get'

src/store/modules/user.ts

@@ -1,8 +1,9 @@
 import { defineStore } from 'pinia'
-import { LoginFormData, GoogleLoginData, UserState } from '@/types'
+import { UserState } from '@/types'
 import { ls } from '@/utils'
-import { login, googleLogin, logout } from '@/api/login'
+import { login, logout } from '@/api/login'
 import router, { resetRouter } from '@/router'
+// eslint-disable-next-line
 // @ts-ignore
 import md5 from 'js-md5'
 
@@ -26,42 +27,23 @@ const useUserStore = defineStore({
 		 * @param params 登录用户信息
 		 *  username: 用户名
 		 *  password: 密码 -> md5加密
-		 *  challenge: 验证码
 		 */
-		login(params: LoginFormData) {
+		login(params: { username: string; password: string }) {
 			const userInfo = {
 				...params,
 				password: md5(params.password)
 			}
-			return login(userInfo).then(data => {
-				// 登录账号 设置为 nickname
-				this.nickname = params.username
-				return data
-			})
-			// .then((data) => {})
-			//   debugger
-			//   const tmp_token = (data || {}).tmp_token
-			//   ls.set('token', tmp_token)
-			//   this.token = tmp_token
-			// })
-		},
-		/**
-		 * Google验证登录
-		 */
-		googleLogin(params: GoogleLoginData) {
-			return googleLogin(params).then((data: any) => {
-				// console.error(data, 'data')
+			return login(userInfo).then((data: any) => {
 				const token = (data || {}).token
 				ls.set('token', token)
 				this.token = token
 
-				// @ts-ignore
-				const { redirect, ...query } = this.loginQuery || {}
+				const { redirect, ...query } = (this.loginQuery || {}) as any
 				// debugger
 				const path = redirect || '/'
-				// console.error(path, 'path query', query)
-				// @ts-ignore
 				router.push({ path, query })
+				// 登录账号 设置为 nickname
+				this.nickname = params.username
 				return data
 			})
 		},

src/views/login/components/GoogleVerifyDialog.vue

@@ -1,148 +0,0 @@
-<template>
-	<el-dialog
-		modalClass="googleVerifyDialog"
-		:title="`${is_bind_google_code ? '验证' : '设置'}身份证验证器应用`"
-		:showClose="false"
-		:closeOnClickModal="false"
-		:modelValue="dialogVisible"
-		@update:modelValue="changeVisible"
-		width="400px"
-	>
-		<div key="1" v-if="!is_bind_google_code" v-show="step === 1" class="contentWrap">
-			<ul style="margin: 0">
-				<li>在Google身份验证器应用中，点按+</li>
-				<li>选择扫描二维码</li>
-			</ul>
-			<div class="imgWrap">
-				<img :src="formData.ext.qr_link" />
-				<el-tooltip effect="light" placement="bottom">
-					<template #content>
-						1.更改身份验证器应用<br />
-						2.在 Google 身份验证器应用中，依次点按 + 和 输入设置密钥<br />
-						3.输入您的电子邮件地址和以下密钥（空格没有影响）： {{ formData.ext.key }}<br />
-						4.确保已选择基于时间<br />
-						5.点按 添加 完成设置
-					</template>
-					<div class="desc">无法扫描？</div>
-				</el-tooltip>
-			</div>
-		</div>
-		<div key="2" v-show="step === 2" class="contentWrap">
-			<div style="padding-bottom: 10px">请输入您在该应用中看到的 6 位数验证码</div>
-			<el-input
-				ref="verifyInput"
-				size="default"
-				v-model="google_code"
-				@keyup.enter="input_nextSetupHandler"
-				maxlength="6"
-				clearable
-				placeholder="请输入验证码"
-			/>
-		</div>
-		<template #footer>
-			<div class="dialog-footer">
-				<el-button v-if="!is_bind_google_code" v-show="step > 1" @click="step--">上一步</el-button>
-				<div class="right">
-					<el-button @click="changeVisible(false)">取消</el-button>
-					<el-button type="primary" :loading="loading" @click="nextSetupHandler">下一步</el-button>
-				</div>
-			</div>
-		</template>
-	</el-dialog>
-</template>
-
-<script setup name="GoogleVerify" lang="ts">
-import { reactive, computed, toRefs, ref, watch, nextTick } from 'vue'
-import useStore from '@/store'
-import { ls, debounce } from '@/utils'
-const { user } = useStore()
-const emits = defineEmits(['update:dialogVisible'])
-const props = defineProps({
-	dialogVisible: {
-		type: Boolean,
-		default: false
-	},
-	formData: {
-		type: Object,
-		default: () => ({
-			is_bind_google_code: 1 // 是否绑定
-		})
-	}
-})
-const state = reactive({
-	step: props.formData.is_bind_google_code === 1 ? 2 : 1,
-	google_code: '',
-	loading: false
-})
-const { step, google_code, loading } = toRefs(state)
-const is_bind_google_code = computed(() => props.formData.is_bind_google_code === 1)
-const verifyInput = ref()
-watch(
-	step,
-	value => {
-		if (value === 2) {
-			nextTick(() => {
-				verifyInput.value?.focus()
-			})
-		}
-	},
-	{
-		// 初始化立即执行
-		immediate: true
-	}
-)
-const nextSetupHandler = () => {
-	if (state.step >= 2) {
-		if (state.loading) return
-		// 提交登录阶段
-		const { tmp_token, ext } = props.formData
-		state.loading = true
-		user
-			.googleLogin({
-				tmp_token,
-				google_key: ext.key,
-				google_code: state.google_code
-			})
-			.then(res => {
-				const username = res.username
-				ls.set('username', username)
-			})
-			.finally(() => {
-				state.loading = false
-			}) /*.then(res => {
-        }).catch(err => {
-        })*/
-	} else {
-		state.step++
-	}
-}
-const input_nextSetupHandler = debounce(nextSetupHandler, 500, true)
-const changeVisible = (bool: boolean) => emits('update:dialogVisible', bool)
-</script>
-
-<style scoped lang="scss">
-.contentWrap {
-	min-height: 194px;
-}
-.imgWrap {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	img {
-		margin-top: 16px;
-		margin-bottom: 10px;
-		width: 100px;
-		height: 100px;
-	}
-	.desc {
-		color: #0075ff;
-		cursor: pointer;
-	}
-}
-.dialog-footer {
-	display: flex;
-	.right {
-		flex: 1;
-	}
-}
-</style>

src/views/login/index.vue

@@ -41,26 +41,10 @@
 				</span>
 			</el-form-item>
 
-			<!-- 验证码 -->
-			<!--			<el-form-item>
-				<div id="captcha" class="captcha">
-					<div v-show="captchaStatus === 'ready'" class="captcha_placeholder"> 行为验证™ 安全组件加载中 </div>
-					<div v-show="captchaStatus === 'loading'" class="captcha_wait">
-						<div class="loading">
-							<div class="loading-dot"></div>
-							<div class="loading-dot"></div>
-							<div class="loading-dot"></div>
-							<div class="loading-dot"></div>
-						</div>
-					</div>
-				</div>
-			</el-form-item>-->
-
 			<el-button size="default" :loading="loading" type="primary" style="width: 100%; margin-bottom: 30px" @click.prevent="handleLogin"
 				>{{ $t('login.login') }}
 			</el-button>
 		</el-form>
-		<GoogleVerifyDialog v-if="dialogOpts.dialogVisible" v-bind="dialogOpts" v-model:dialogVisible="dialogOpts.dialogVisible" />
 	</div>
 </template>
 
@@ -78,7 +62,6 @@ import useStore from '@/store'
 // API依赖
 // import { getGeetConfig } from '@/api/login'
 import { useRoute } from 'vue-router'
-import { LoginFormData } from '@/types'
 
 const { user } = useStore()
 const route = useRoute()
@@ -88,29 +71,19 @@ const passwordRef = ref(/*ElInput*/)
 const captchaStatus = ref('ready') // ready loading complete
 
 const state = reactive({
-	dialogOpts: {
-		dialogVisible: false,
-		formData: {
-			is_bind_google_code: 1,
-			ext: {}
-		}
-	},
 	loginForm: {
 		username: 'admin',
-		password: '123456'
+		password: '100607'
 	},
 	loginRules: {
 		username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
 		password: [{ required: true, message: '密码不能为空', trigger: 'blur' }]
 	},
 	loading: false,
-	passwordType: 'password',
-	otherQuery: {},
-	clientHeight: document.documentElement.clientHeight
+	passwordType: 'password'
 })
-let captcha_obj: any = null
 
-const { dialogOpts, loginForm, loginRules, loading, passwordType } = toRefs(state)
+const { loginForm, loginRules, loading, passwordType } = toRefs(state)
 
 function showPwd() {
 	if (state.passwordType === 'password') {
@@ -124,39 +97,14 @@ function showPwd() {
 }
 
 function handleLogin() {
-	// if (captcha_obj.getValidate) {
-	// 	const result = captcha_obj.getValidate()
-	// 	if (!result) {
-	// 		return ElMessage.warning('请先完成机器验证')
-	// 	}
 	loginFormRef.value.validate((valid: boolean) => {
 		if (valid) {
 			state.loading = true
-			// const challenge = result.geetest_challenge
-			// const seccode = result.geetest_seccode
-			user
-				.login({
-					...state.loginForm
-					// challenge,
-					// seccode
-				} as LoginFormData)
-				.then((formData: any) => {
-					user.googleLogin()
-					// state.dialogOpts = {
-					// 	formData,
-					// 	dialogVisible: true
-					// }
-				})
-				.catch(() => {
-					// 重置验证
-					// captcha_obj.refresh() // 新的为reset
-				})
-				.finally(() => {
-					state.loading = false
-				})
+			user.login(state.loginForm).finally(() => {
+				state.loading = false
+			})
 		}
 	})
-	// }
 }
 
 watch(
@@ -173,29 +121,6 @@ watch(
 )
 
 onMounted(() => {
-	// 极验证初始化
-	/*getGeetConfig().then(data => {
-		// 极验证加载中
-		captchaStatus.value = 'loading'
-    // eslint-disable-next-line
-		// @ts-ignore
-		const initGeetest: any = window.initGeetest
-		initGeetest(
-			{
-				...data,
-				product: 'float', // 产品形式，包括：float，popup
-				width: '100%' // 该配置已失效
-			},
-			(captchaObj: any) => {
-				captchaObj.appendTo('#captcha')
-				captchaObj.onReady(() => {
-					// 极验证加载完成
-					captchaStatus.value = 'complete'
-				})
-				captcha_obj = captchaObj
-			}
-		)
-	})*/
 })
 </script>
 
@@ -365,70 +290,5 @@ $light_gray: #eee;
 		cursor: pointer;
 		user-select: none;
 	}
-	// todo
-	.captcha {
-		width: 100%;
-		&_placeholder {
-			height: 42px;
-			width: 100%;
-			text-align: center;
-			border-radius: 2px;
-			background-color: #f3f3f3;
-			color: #bbbbbb;
-			font-size: 14px;
-			letter-spacing: 0.1px;
-			line-height: 42px;
-		}
-		&_wait {
-			height: 42px;
-			width: 100%;
-			text-align: center;
-			border-radius: 2px;
-			background-color: #f3f3f3;
-		}
-	}
-
-	.loading {
-		margin: auto;
-		width: 70px;
-		height: 20px;
-		&-dot {
-			&:nth-child(1) {
-				animation-delay: 0s;
-			}
-			&:nth-child(2) {
-				animation-delay: 0.1s;
-			}
-
-			&:nth-child(3) {
-				animation-delay: 0.2s;
-			}
-
-			&:nth-child(4) {
-				animation-delay: 0.3s;
-			}
-			float: left;
-			width: 8px;
-			height: 8px;
-			margin: 18px 4px;
-			background: #ccc;
-			border-radius: 50%;
-			opacity: 0;
-			box-shadow: 0 0 2px black;
-			animation: loadingFade 1s infinite;
-		}
-	}
-
-	@keyframes loadingFade {
-		0% {
-			opacity: 0;
-		}
-		50% {
-			opacity: 0.8;
-		}
-		100% {
-			opacity: 0;
-		}
-	}
 }
 </style>