feat(passport): 支持多租户登录及密码找回功能
- 新增重置密码接口及参数支持手机号/邮箱找回 - 登录接口支持多租户场景,返回多租户选项供前端选择 - 增加登录状态持久化保存租户和用户信息 - 登录界面新增“忘记密码”链接并实现密码找回页 - 忘记密码页支持邮箱和手机两种找回方式,首3次发送验证码免图形验证码校验 - 登录页短信验证码发送优化,增加发送次数限制和图形验证码弹窗 - 请求拦截器支持跳过租户头注入,适配登录前找回等场景 - 路由表启用忘记密码页面路由 - 国际化新增密码找
This commit is contained in:
22
.workbuddy/memory/2026-07-24.md
Normal file
22
.workbuddy/memory/2026-07-24.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# 2026-07-24 工作记录
|
||||||
|
|
||||||
|
## 从 guilixu-admin 复制登录模块到 mp-vue
|
||||||
|
mp-vue 是 Vue3 + Ant Design Vue + ele-admin-pro 模板项目,其登录模块是 guilixu-admin 改造前的旧版。本次把 guilixu-admin 已验证的登录增强功能完整移植过来。
|
||||||
|
|
||||||
|
### 新增/修改文件
|
||||||
|
- `src/views/passport/forget/index.vue`(新建):忘记密码页,邮箱/手机两种找回,前3次免图形验证码,密码强度校验,调用 resetPassword。
|
||||||
|
- `src/api/passport/login/model/index.ts`:新增 `TenantOption`、`LoginOutcome`;`LoginResult` 增加 `tenants?`;`LoginParam` 增加 `smsCode?`。
|
||||||
|
- `src/api/passport/login/index.ts`:新增 `saveLoginState`、`loginBySelectTenant`、`sendSmsCaptchaByAdmin`、`sendEmailCaptcha`;`loginBySuperAdminSms` 改为返回 `LoginOutcome`(多租户 selectTenant / 单租户 ok)。
|
||||||
|
- `src/utils/request.ts`:请求拦截器支持 `X-Tenant-Skip`(适配 axios 0.27 的 `config.headers.common` 风格),登录前找回场景跳过租户头注入避免串租户。
|
||||||
|
- `src/api/layout/index.ts` + `model/index.ts`:新增 `resetPassword`(POST /resetPassword,带 X-Tenant-Skip 头)与 `ResetPasswordParam`。
|
||||||
|
- `src/views/passport/login/index.vue`:发送验证码前3次免图形验证(handleSendCode);onLoginBySms 处理 LoginOutcome 多租户选择;新增选择租户弹窗;账号登录增加"忘记密码"链接跳 /forget。
|
||||||
|
- `src/router/routes.ts`:启用 /forget 路由。
|
||||||
|
- `src/i18n/lang/zh_CN/login.ts` / `en/login.ts`:新增 forgetPage 命名空间。
|
||||||
|
|
||||||
|
### 验证
|
||||||
|
- `vue-tsc`:本次改动文件无类型错误(项目本身存在大量与本次无关的 JSX 解析历史错误)。
|
||||||
|
- `vite build --outDir dist-verify-mp`:编译打包成功,forget 页 chunk 已生成,无 error/fail。临时产物已移至 /tmp。
|
||||||
|
|
||||||
|
### 注意点
|
||||||
|
- mp-vue 用 axios 0.27.2,request 拦截器头写法与 guilixu-admin(axios 1.x)不同(用 `config.headers.common[...]`),X-Tenant-Skip 判断同时兼容 `config.headers['X-Tenant-Skip']` 与 `config.headers.common['X-Tenant-Skip']`。
|
||||||
|
- 后端接口 /sendEmailCaptcha、/sendSmsCaptchaByAdmin、/resetPassword、/loginBySelectTenant 需 guilixu-java 已实现(与 website-admin 同源 server.websoft.top,通常已具备)。
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import request from '@/utils/request';
|
import request from '@/utils/request';
|
||||||
import type { ApiResult } from '@/api';
|
import type { ApiResult } from '@/api';
|
||||||
import type { User } from '@/api/system/user/model';
|
import type { User } from '@/api/system/user/model';
|
||||||
import type { UpdatePasswordParam, NoticeResult } from './model';
|
import type { UpdatePasswordParam, ResetPasswordParam, NoticeResult } from './model';
|
||||||
import { SERVER_API_URL } from '@/config/setting';
|
import { SERVER_API_URL } from '@/config/setting';
|
||||||
import { Company } from '@/api/system/company/model';
|
import { Company } from '@/api/system/company/model';
|
||||||
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
import { CmsWebsite } from '@/api/cms/cmsWebsite/model';
|
||||||
@@ -108,6 +108,24 @@ export async function updatePassword(
|
|||||||
return Promise.reject(new Error(res.data.message));
|
return Promise.reject(new Error(res.data.message));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 找回/重置密码(未登录场景,登录页"忘记密码"入口)
|
||||||
|
* 后端对应 POST /resetPassword,支持手机或邮箱两种方式
|
||||||
|
*/
|
||||||
|
export async function resetPassword(
|
||||||
|
data: ResetPasswordParam
|
||||||
|
): Promise<string> {
|
||||||
|
const res = await request.post<ApiResult<unknown>>(
|
||||||
|
SERVER_API_URL + '/resetPassword',
|
||||||
|
data,
|
||||||
|
{ headers: { 'X-Tenant-Skip': '1' } }
|
||||||
|
);
|
||||||
|
if (res.data.code === 0) {
|
||||||
|
return res.data.message ?? '密码重置成功';
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message));
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 创建完整网站并初始化
|
* 创建完整网站并初始化
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -24,6 +24,23 @@ export interface UpdatePasswordParam {
|
|||||||
oldPassword: string;
|
oldPassword: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 找回/重置密码参数(未登录场景,登录页"忘记密码"入口)
|
||||||
|
* 手机找回与邮箱找回二选一
|
||||||
|
*/
|
||||||
|
export interface ResetPasswordParam {
|
||||||
|
/** 手机找回时必填 */
|
||||||
|
phone?: string;
|
||||||
|
smsCode?: string;
|
||||||
|
/** 邮箱找回时必填 */
|
||||||
|
email?: string;
|
||||||
|
emailCode?: string;
|
||||||
|
/** 新密码 */
|
||||||
|
newPassword: string;
|
||||||
|
/** 确认新密码 */
|
||||||
|
confirmPassword: string;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 通知数据格式
|
* 通知数据格式
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -9,6 +9,30 @@ import type {
|
|||||||
} from './model';
|
} from './model';
|
||||||
import { User } from '@/api/system/user/model';
|
import { User } from '@/api/system/user/model';
|
||||||
import { SERVER_API_URL } from '@/config/setting';
|
import { SERVER_API_URL } from '@/config/setting';
|
||||||
|
import type { LoginOutcome, TenantOption } from './model';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录态落地:把后端返回的 access_token / 租户 / 用户 持久化到本地
|
||||||
|
*/
|
||||||
|
function saveLoginState(result: LoginResult | undefined, remember?: boolean) {
|
||||||
|
if (!result) return;
|
||||||
|
if (result.access_token) {
|
||||||
|
setToken(result.access_token, remember);
|
||||||
|
}
|
||||||
|
const user = result.user;
|
||||||
|
if (user) {
|
||||||
|
if (user.tenantId != null) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem('TenantId', String(user.tenantId));
|
||||||
|
} catch { /* ignore */ }
|
||||||
|
}
|
||||||
|
if (user.userId != null) {
|
||||||
|
try {
|
||||||
|
localStorage.setItem('UserId', String(user.userId));
|
||||||
|
} catch { /* ignore */ }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 登录
|
* 登录
|
||||||
@@ -84,22 +108,58 @@ export async function loginByUserId(data: LoginParam) {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* 超级管理员短信验证码登录
|
* 超级管理员短信验证码登录
|
||||||
|
* 后端对应 POST /loginBySuperAdminSms,参数为 { phone, code, tenantId }
|
||||||
|
* - 单租户:直接返回 ok
|
||||||
|
* - 多租户:返回 selectTenant,前端需调用 loginBySelectTenant 二次登录
|
||||||
*/
|
*/
|
||||||
export async function loginBySuperAdminSms(data: LoginParam) {
|
export async function loginBySuperAdminSms(
|
||||||
|
data: LoginParam
|
||||||
|
): Promise<LoginOutcome> {
|
||||||
const res = await request.post<ApiResult<LoginResult>>(
|
const res = await request.post<ApiResult<LoginResult>>(
|
||||||
SERVER_API_URL + '/loginBySuperAdminSms',
|
SERVER_API_URL + '/loginBySuperAdminSms',
|
||||||
data
|
{ phone: data.phone, code: data.code ?? data.smsCode, smsCode: data.smsCode, tenantId: data.tenantId }
|
||||||
);
|
);
|
||||||
if (res.data.code === 0) {
|
if (res.data.code !== 0) {
|
||||||
setToken(res.data.data?.access_token, data.remember);
|
return Promise.reject(new Error(res.data.message));
|
||||||
if (res.data.data?.user) {
|
|
||||||
const user = res.data.data?.user;
|
|
||||||
localStorage.setItem('TenantId', String(user.tenantId));
|
|
||||||
localStorage.setItem('UserId', String(user.userId));
|
|
||||||
}
|
|
||||||
return res.data.message;
|
|
||||||
}
|
}
|
||||||
return Promise.reject(new Error(res.data.message));
|
const result = res.data.data;
|
||||||
|
if (result?.tenants && result.tenants.length > 0) {
|
||||||
|
return {
|
||||||
|
status: 'selectTenant',
|
||||||
|
tenants: result.tenants as TenantOption[],
|
||||||
|
message: res.data.message || '请选择要登录的租户'
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (result?.user) {
|
||||||
|
saveLoginState(result, data.remember);
|
||||||
|
return { status: 'ok', user: result.user, message: res.data.message || '登录成功' };
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message || '登录失败'));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 选择租户后登录(多租户短信登录专用二次登录接口)
|
||||||
|
* 后端对应 POST /loginBySelectTenant,参数为 { phone, code, tenantId }
|
||||||
|
*/
|
||||||
|
export async function loginBySelectTenant(data: {
|
||||||
|
phone: string;
|
||||||
|
code: string;
|
||||||
|
tenantId: number;
|
||||||
|
remember?: boolean;
|
||||||
|
}): Promise<LoginOutcome> {
|
||||||
|
const res = await request.post<ApiResult<LoginResult>>(
|
||||||
|
SERVER_API_URL + '/loginBySelectTenant',
|
||||||
|
{ phone: data.phone, code: data.code, smsCode: data.code, tenantId: data.tenantId }
|
||||||
|
);
|
||||||
|
if (res.data.code !== 0) {
|
||||||
|
return Promise.reject(new Error(res.data.message));
|
||||||
|
}
|
||||||
|
const result = res.data.data;
|
||||||
|
if (result?.user) {
|
||||||
|
saveLoginState(result, data.remember);
|
||||||
|
return { status: 'ok', user: result.user, message: res.data.message || '登录成功' };
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message || '登录失败'));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -136,6 +196,46 @@ export async function sendSmsCaptcha(data: LoginParam) {
|
|||||||
return Promise.reject(new Error(res.data.message));
|
return Promise.reject(new Error(res.data.message));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送短信验证码(后台管理员,跨租户:只要该手机号是超管或管理员即发送)
|
||||||
|
* 后端对应 POST /sendSmsCaptchaByAdmin,参数为 { phone }
|
||||||
|
* @param options.skipTenant 为 true 时不携带 tenantId 请求头(登录前无法确定租户时使用)
|
||||||
|
*/
|
||||||
|
export async function sendSmsCaptchaByAdmin(
|
||||||
|
data: LoginParam,
|
||||||
|
options?: { skipTenant?: boolean }
|
||||||
|
) {
|
||||||
|
const res = await request.post<ApiResult<SmsCaptchaResult>>(
|
||||||
|
SERVER_API_URL + '/sendSmsCaptchaByAdmin',
|
||||||
|
data,
|
||||||
|
options?.skipTenant ? { headers: { 'X-Tenant-Skip': '1' } } : undefined
|
||||||
|
);
|
||||||
|
if (res.data.code === 0) {
|
||||||
|
return res.data.message;
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 发送邮箱验证码(找回密码等登录前场景使用)
|
||||||
|
* 后端对应 POST /sendEmailCaptcha,参数为 { email }
|
||||||
|
* @param options.skipTenant 为 true 时不携带 tenantId 请求头(登录前无法确定租户时使用)
|
||||||
|
*/
|
||||||
|
export async function sendEmailCaptcha(
|
||||||
|
data: LoginParam,
|
||||||
|
options?: { skipTenant?: boolean }
|
||||||
|
) {
|
||||||
|
const res = await request.post<ApiResult<unknown>>(
|
||||||
|
SERVER_API_URL + '/sendEmailCaptcha',
|
||||||
|
data,
|
||||||
|
options?.skipTenant ? { headers: { 'X-Tenant-Skip': '1' } } : undefined
|
||||||
|
);
|
||||||
|
if (res.data.code === 0) {
|
||||||
|
return res.data.message;
|
||||||
|
}
|
||||||
|
return Promise.reject(new Error(res.data.message));
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 登录
|
* 登录
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -19,6 +19,8 @@ export interface LoginParam {
|
|||||||
email?: string;
|
email?: string;
|
||||||
// 短信验证码
|
// 短信验证码
|
||||||
code?: string;
|
code?: string;
|
||||||
|
// 短信验证码(别名,与后端 LoginParam.code 对应)
|
||||||
|
smsCode?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -29,8 +31,30 @@ export interface LoginResult {
|
|||||||
access_token?: string;
|
access_token?: string;
|
||||||
// 用户信息
|
// 用户信息
|
||||||
user?: User;
|
user?: User;
|
||||||
|
// 多租户场景下返回,此时 access_token / user 为 null
|
||||||
|
tenants?: TenantOption[];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 多租户登录时后端返回的租户选项
|
||||||
|
*/
|
||||||
|
export interface TenantOption {
|
||||||
|
tenantId?: number;
|
||||||
|
tenantName?: string;
|
||||||
|
userId?: number;
|
||||||
|
username?: string;
|
||||||
|
nickname?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 登录接口统一返回结果
|
||||||
|
* - ok:单租户直接登录成功
|
||||||
|
* - selectTenant:多租户,需要前端弹出选择租户列表
|
||||||
|
*/
|
||||||
|
export type LoginOutcome =
|
||||||
|
| { status: 'ok'; user: NonNullable<LoginResult['user']>; message: string }
|
||||||
|
| { status: 'selectTenant'; tenants: TenantOption[]; message: string };
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 图形验证码返回结果
|
* 图形验证码返回结果
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -10,5 +10,29 @@ export default {
|
|||||||
loading: 'loading',
|
loading: 'loading',
|
||||||
oldPassword: 'Old',
|
oldPassword: 'Old',
|
||||||
newPassword: 'New',
|
newPassword: 'New',
|
||||||
confirm: 'Confirm'
|
confirm: 'Confirm',
|
||||||
|
forgetPage: {
|
||||||
|
title: 'Reset Password',
|
||||||
|
subTitle: 'Enter your account info to verify and reset password',
|
||||||
|
tabEmail: 'By Email',
|
||||||
|
tabPhone: 'By Phone',
|
||||||
|
emailPlaceholder: 'Please enter email',
|
||||||
|
phonePlaceholder: 'Please enter phone number',
|
||||||
|
codePlaceholder: 'Please enter code',
|
||||||
|
passwordPlaceholder: 'New password (min 8 chars, letters & numbers)',
|
||||||
|
confirmPlaceholder: 'Confirm new password',
|
||||||
|
getCode: 'Get Code',
|
||||||
|
reset: 'Reset',
|
||||||
|
backLogin: 'Back to Login',
|
||||||
|
sentEmail: 'Code sent to email, please check',
|
||||||
|
success: 'Password reset successfully',
|
||||||
|
emailRule: 'Please enter a valid email',
|
||||||
|
phoneRule: 'Please enter a valid phone number',
|
||||||
|
codeRule: 'Please enter the code',
|
||||||
|
newPasswordRule: 'Password must be at least 8 chars with letters and numbers',
|
||||||
|
confirmRule: 'Passwords do not match',
|
||||||
|
captchaTitle: 'Send Code',
|
||||||
|
captchaPlaceholder: 'Please enter the captcha',
|
||||||
|
sendNow: 'Send Now'
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -10,5 +10,29 @@ export default {
|
|||||||
loading: '登录中',
|
loading: '登录中',
|
||||||
oldPassword: '旧密码',
|
oldPassword: '旧密码',
|
||||||
newPassword: '新密码',
|
newPassword: '新密码',
|
||||||
confirm: '确认密码'
|
confirm: '确认密码',
|
||||||
|
forgetPage: {
|
||||||
|
title: '找回密码',
|
||||||
|
subTitle: '请输入账号信息,验证身份后重置密码',
|
||||||
|
tabEmail: '邮箱找回',
|
||||||
|
tabPhone: '手机找回',
|
||||||
|
emailPlaceholder: '请输入邮箱',
|
||||||
|
phonePlaceholder: '请输入手机号',
|
||||||
|
codePlaceholder: '请输入验证码',
|
||||||
|
passwordPlaceholder: '请输入新密码(至少8位,含字母和数字)',
|
||||||
|
confirmPlaceholder: '请再次输入新密码',
|
||||||
|
getCode: '获取验证码',
|
||||||
|
reset: '重置密码',
|
||||||
|
backLogin: '返回登录',
|
||||||
|
sentEmail: '验证码已发送到邮箱,请注意查收',
|
||||||
|
success: '密码重置成功',
|
||||||
|
emailRule: '请输入正确的邮箱',
|
||||||
|
phoneRule: '请输入正确的手机号',
|
||||||
|
codeRule: '请输入验证码',
|
||||||
|
newPasswordRule: '密码至少8位,且必须包含字母和数字',
|
||||||
|
confirmRule: '两次输入的密码不一致',
|
||||||
|
captchaTitle: '发送验证码',
|
||||||
|
captchaPlaceholder: '请输入图形验证码',
|
||||||
|
sendNow: '立即发送'
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -66,11 +66,11 @@ export const routes = [
|
|||||||
component: () => import('@/views/ai/index.vue'),
|
component: () => import('@/views/ai/index.vue'),
|
||||||
meta: { title: 'AI 测试' }
|
meta: { title: 'AI 测试' }
|
||||||
},
|
},
|
||||||
// {
|
{
|
||||||
// path: '/forget',
|
path: '/forget',
|
||||||
// component: () => import('@/views/passport/forget/index.vue'),
|
component: () => import('@/views/passport/forget/index.vue'),
|
||||||
// meta: { title: '忘记密码' }
|
meta: { title: '忘记密码' }
|
||||||
// },
|
},
|
||||||
// {
|
// {
|
||||||
// path: '/wx-work-login',
|
// path: '/wx-work-login',
|
||||||
// component: () => import('@/views/passport/wx-work/index.vue'),
|
// component: () => import('@/views/passport/wx-work/index.vue'),
|
||||||
|
|||||||
@@ -48,6 +48,15 @@ service.interceptors.request.use(
|
|||||||
}
|
}
|
||||||
// 获取租户ID
|
// 获取租户ID
|
||||||
if (config.headers) {
|
if (config.headers) {
|
||||||
|
// 登录前场景(找回密码等)由调用方显式设置 X-Tenant-Skip,
|
||||||
|
// 此时不做任何租户/企业/商户/域名头注入,避免串租户
|
||||||
|
const headersAny = config.headers as any;
|
||||||
|
const skipTenant =
|
||||||
|
headersAny['X-Tenant-Skip'] ||
|
||||||
|
(headersAny.common && headersAny.common['X-Tenant-Skip']);
|
||||||
|
if (skipTenant) {
|
||||||
|
return config;
|
||||||
|
}
|
||||||
// 附加企业ID
|
// 附加企业ID
|
||||||
const companyId = localStorage.getItem('CompanyId');
|
const companyId = localStorage.getItem('CompanyId');
|
||||||
if (companyId) {
|
if (companyId) {
|
||||||
|
|||||||
621
src/views/passport/forget/index.vue
Normal file
621
src/views/passport/forget/index.vue
Normal file
@@ -0,0 +1,621 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="login-wrapper"
|
||||||
|
:style="{
|
||||||
|
backgroundImage: 'url(https://oss.wsdns.cn/20250105/314d2a3da10048b09ef0f0464fdacbff.jpg)'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div class="logo-login" v-if="config?.siteName">
|
||||||
|
<img :src="config.siteLogo" class="logo" />
|
||||||
|
<h4>{{ config.siteName }}</h4>
|
||||||
|
</div>
|
||||||
|
<a-form
|
||||||
|
ref="formRef"
|
||||||
|
:model="form"
|
||||||
|
:rules="rules"
|
||||||
|
class="login-form ele-bg-white"
|
||||||
|
>
|
||||||
|
<div class="login-title flex justify-center items-center px-12">
|
||||||
|
<h4 class="title-btn active">{{ t('login.forgetPage.title') }}</h4>
|
||||||
|
</div>
|
||||||
|
<p class="forget-subtitle">{{ t('login.forgetPage.subTitle') }}</p>
|
||||||
|
|
||||||
|
<a-tabs
|
||||||
|
v-model:activeKey="activeTab"
|
||||||
|
class="forget-tabs"
|
||||||
|
@change="onTabChange"
|
||||||
|
>
|
||||||
|
<!-- 邮箱找回 -->
|
||||||
|
<a-tab-pane key="email" :tab="t('login.forgetPage.tabEmail')">
|
||||||
|
<a-form-item name="email">
|
||||||
|
<a-input
|
||||||
|
allow-clear
|
||||||
|
size="large"
|
||||||
|
v-model:value="form.email"
|
||||||
|
:placeholder="t('login.forgetPage.emailPlaceholder')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<MailOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item name="emailCode">
|
||||||
|
<div class="login-input-group">
|
||||||
|
<a-input
|
||||||
|
allow-clear
|
||||||
|
size="large"
|
||||||
|
:maxlength="6"
|
||||||
|
v-model:value="form.emailCode"
|
||||||
|
:placeholder="t('login.forgetPage.codePlaceholder')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<SafetyOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button
|
||||||
|
class="login-captcha"
|
||||||
|
:disabled="!!countdownTime"
|
||||||
|
@click="sendCode"
|
||||||
|
>
|
||||||
|
<span v-if="!countdownTime">{{ t('login.forgetPage.getCode') }}</span>
|
||||||
|
<span v-else>{{ countdownTime }} s</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
</a-tab-pane>
|
||||||
|
|
||||||
|
<!-- 手机找回 -->
|
||||||
|
<a-tab-pane key="phone" :tab="t('login.forgetPage.tabPhone')">
|
||||||
|
<a-form-item name="phone">
|
||||||
|
<a-input
|
||||||
|
allow-clear
|
||||||
|
size="large"
|
||||||
|
:maxlength="11"
|
||||||
|
v-model:value="form.phone"
|
||||||
|
:placeholder="t('login.forgetPage.phonePlaceholder')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<MobileOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item name="code">
|
||||||
|
<div class="login-input-group">
|
||||||
|
<a-input
|
||||||
|
allow-clear
|
||||||
|
size="large"
|
||||||
|
:maxlength="6"
|
||||||
|
v-model:value="form.code"
|
||||||
|
:placeholder="t('login.forgetPage.codePlaceholder')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<SafetyOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button
|
||||||
|
class="login-captcha"
|
||||||
|
:disabled="!!countdownTime"
|
||||||
|
@click="sendCode"
|
||||||
|
>
|
||||||
|
<span v-if="!countdownTime">{{ t('login.forgetPage.getCode') }}</span>
|
||||||
|
<span v-else>{{ countdownTime }} s</span>
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
</a-form-item>
|
||||||
|
</a-tab-pane>
|
||||||
|
</a-tabs>
|
||||||
|
|
||||||
|
<a-form-item name="newPassword">
|
||||||
|
<a-input-password
|
||||||
|
size="large"
|
||||||
|
v-model:value="form.newPassword"
|
||||||
|
:placeholder="t('login.forgetPage.passwordPlaceholder')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item name="confirmPassword">
|
||||||
|
<a-input-password
|
||||||
|
size="large"
|
||||||
|
v-model:value="form.confirmPassword"
|
||||||
|
:placeholder="t('login.forgetPage.confirmPlaceholder')"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<LockOutlined />
|
||||||
|
</template>
|
||||||
|
</a-input-password>
|
||||||
|
</a-form-item>
|
||||||
|
|
||||||
|
<a-form-item>
|
||||||
|
<a-button
|
||||||
|
block
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
:loading="loading"
|
||||||
|
@click="submit"
|
||||||
|
>
|
||||||
|
{{ loading ? t('login.loading') : t('login.forgetPage.reset') }}
|
||||||
|
</a-button>
|
||||||
|
</a-form-item>
|
||||||
|
<div class="text-center pt-2">
|
||||||
|
<a class="login-forget" @click="goLogin">{{ t('login.forgetPage.backLogin') }}</a>
|
||||||
|
</div>
|
||||||
|
</a-form>
|
||||||
|
|
||||||
|
<!-- 图形验证码弹窗 -->
|
||||||
|
<a-modal
|
||||||
|
:width="340"
|
||||||
|
:footer="null"
|
||||||
|
:title="t('login.forgetPage.captchaTitle')"
|
||||||
|
v-model:visible="captchaVisible"
|
||||||
|
@cancel="codeLoading = false"
|
||||||
|
>
|
||||||
|
<div class="login-input-group" style="margin-bottom: 16px">
|
||||||
|
<a-input
|
||||||
|
v-model:value="imgCode"
|
||||||
|
:maxlength="5"
|
||||||
|
size="large"
|
||||||
|
:placeholder="t('login.forgetPage.captchaPlaceholder')"
|
||||||
|
allow-clear
|
||||||
|
@pressEnter="() => doSendCode(imgCode)"
|
||||||
|
/>
|
||||||
|
<a-button class="login-captcha">
|
||||||
|
<img alt="" :src="captchaImage" @click="refreshCaptcha" />
|
||||||
|
</a-button>
|
||||||
|
</div>
|
||||||
|
<a-button
|
||||||
|
block
|
||||||
|
size="large"
|
||||||
|
type="primary"
|
||||||
|
:loading="codeLoading"
|
||||||
|
@click="() => doSendCode(imgCode)"
|
||||||
|
>
|
||||||
|
{{ t('login.forgetPage.sendNow') }}
|
||||||
|
</a-button>
|
||||||
|
</a-modal>
|
||||||
|
|
||||||
|
<div class="login-copyright">
|
||||||
|
<a-space>
|
||||||
|
<span>© {{ new Date().getFullYear() }}</span>
|
||||||
|
<span>{{ config?.copyright || 'websoft.top Inc.' }}</span>
|
||||||
|
</a-space>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, reactive, computed, onUnmounted } from 'vue';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import {
|
||||||
|
LockOutlined,
|
||||||
|
MobileOutlined,
|
||||||
|
SafetyOutlined,
|
||||||
|
MailOutlined
|
||||||
|
} from '@ant-design/icons-vue';
|
||||||
|
import { FormInstance } from 'ant-design-vue/es/form';
|
||||||
|
import {
|
||||||
|
sendSmsCaptchaByAdmin,
|
||||||
|
sendEmailCaptcha,
|
||||||
|
getCaptcha
|
||||||
|
} from '@/api/passport/login';
|
||||||
|
import { resetPassword } from '@/api/layout';
|
||||||
|
import useFormData from '@/utils/use-form-data';
|
||||||
|
import { Config } from '@/api/cms/cmsWebsiteField/model';
|
||||||
|
|
||||||
|
const { t } = useI18n();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
// 默认站点配置(与登录页保持一致)
|
||||||
|
const defaultConfig: Config = {
|
||||||
|
siteName: '小程序商城',
|
||||||
|
siteLogo: 'https://oss.wsdns.cn/20240822/0252ad4ed46449cdafe12f8d3d96c2ea.svg',
|
||||||
|
domain: '',
|
||||||
|
icpNo: '',
|
||||||
|
copyright: '',
|
||||||
|
loginBgImg: '',
|
||||||
|
address: '',
|
||||||
|
tel: '',
|
||||||
|
kefu2: '',
|
||||||
|
kefu1: '',
|
||||||
|
email: '',
|
||||||
|
loginTitle: '',
|
||||||
|
sysLogo: ''
|
||||||
|
};
|
||||||
|
const config = ref<Config>({ ...defaultConfig });
|
||||||
|
|
||||||
|
// 找回方式:email(邮箱) / phone(手机),默认邮箱
|
||||||
|
const activeTab = ref<'email' | 'phone'>('email');
|
||||||
|
|
||||||
|
const { form } = useFormData<{
|
||||||
|
email: string;
|
||||||
|
emailCode: string;
|
||||||
|
phone: string;
|
||||||
|
code: string;
|
||||||
|
newPassword: string;
|
||||||
|
confirmPassword: string;
|
||||||
|
}>({
|
||||||
|
email: '',
|
||||||
|
emailCode: '',
|
||||||
|
phone: '',
|
||||||
|
code: '',
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: ''
|
||||||
|
});
|
||||||
|
|
||||||
|
const formRef = ref<FormInstance | null>(null);
|
||||||
|
const loading = ref(false);
|
||||||
|
|
||||||
|
// 验证码倒计时
|
||||||
|
const countdownTime = ref(0);
|
||||||
|
let countdownTimer: number | null = null;
|
||||||
|
|
||||||
|
// 图形验证码弹窗
|
||||||
|
const captchaVisible = ref(false);
|
||||||
|
const captchaImage = ref('');
|
||||||
|
const captchaText = ref('');
|
||||||
|
const imgCode = ref('');
|
||||||
|
const codeLoading = ref(false);
|
||||||
|
|
||||||
|
// 同一个账号前 3 次发送不需要图形验证码
|
||||||
|
const FREE_SEND_TIMES = 3;
|
||||||
|
|
||||||
|
// 根据当前找回方式和账号生成发送次数缓存 key
|
||||||
|
const getSendCountKey = () => {
|
||||||
|
const account = activeTab.value === 'email' ? form.email : form.phone;
|
||||||
|
return `forget_send_count_${activeTab.value}_${account}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 读取当前账号已发送次数
|
||||||
|
const getSendCount = () => {
|
||||||
|
const key = getSendCountKey();
|
||||||
|
if (!key) return 0;
|
||||||
|
const count = localStorage.getItem(key);
|
||||||
|
return count ? Number(count) || 0 : 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 增加发送次数
|
||||||
|
const increaseSendCount = () => {
|
||||||
|
const key = getSendCountKey();
|
||||||
|
if (!key) return;
|
||||||
|
localStorage.setItem(key, String(getSendCount() + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 刷新图形验证码
|
||||||
|
const refreshCaptcha = () => {
|
||||||
|
getCaptcha()
|
||||||
|
.then((data) => {
|
||||||
|
captchaImage.value = data.base64;
|
||||||
|
captchaText.value = data.text;
|
||||||
|
})
|
||||||
|
.catch((e: Error) => message.error(e.message));
|
||||||
|
};
|
||||||
|
|
||||||
|
// 打开图形验证码弹窗
|
||||||
|
const openCaptchaModal = () => {
|
||||||
|
imgCode.value = '';
|
||||||
|
refreshCaptcha();
|
||||||
|
captchaVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 密码强度:至少8位,且包含字母和数字
|
||||||
|
const passwordRules = [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: t('login.forgetPage.newPasswordRule'),
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{ min: 8, message: t('login.forgetPage.newPasswordRule'), trigger: 'blur' },
|
||||||
|
{
|
||||||
|
pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d@$!%*#?&]{8,}$/,
|
||||||
|
message: t('login.forgetPage.newPasswordRule'),
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const confirmPasswordRules = [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: t('login.forgetPage.confirmRule'),
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
validator: (_rule: unknown, value: string) =>
|
||||||
|
value === form.newPassword
|
||||||
|
? Promise.resolve()
|
||||||
|
: Promise.reject(new Error(t('login.forgetPage.confirmRule'))),
|
||||||
|
trigger: 'blur'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 根据当前找回方式动态生成校验规则
|
||||||
|
const rules = computed(() => {
|
||||||
|
if (activeTab.value === 'email') {
|
||||||
|
return {
|
||||||
|
email: [
|
||||||
|
{ required: true, message: t('login.forgetPage.emailRule'), trigger: 'blur' },
|
||||||
|
{ type: 'email', message: t('login.forgetPage.emailRule'), trigger: 'blur' }
|
||||||
|
],
|
||||||
|
emailCode: [
|
||||||
|
{ required: true, message: t('login.forgetPage.codeRule'), trigger: 'blur' }
|
||||||
|
],
|
||||||
|
newPassword: passwordRules,
|
||||||
|
confirmPassword: confirmPasswordRules
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
phone: [
|
||||||
|
{ required: true, message: t('login.forgetPage.phoneRule'), trigger: 'blur' },
|
||||||
|
{ pattern: /^1\d{10}$/, message: t('login.forgetPage.phoneRule'), trigger: 'blur' }
|
||||||
|
],
|
||||||
|
code: [
|
||||||
|
{ required: true, message: t('login.forgetPage.codeRule'), trigger: 'blur' }
|
||||||
|
],
|
||||||
|
newPassword: passwordRules,
|
||||||
|
confirmPassword: confirmPasswordRules
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const onTabChange = () => {
|
||||||
|
formRef.value?.clearValidate();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 发送验证码(邮箱/手机)
|
||||||
|
const sendCode = () => {
|
||||||
|
if (activeTab.value === 'email') {
|
||||||
|
if (!form.email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) {
|
||||||
|
message.error(t('login.forgetPage.emailRule'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (!form.phone || !/^1\d{10}$/.test(form.phone)) {
|
||||||
|
message.error(t('login.forgetPage.phoneRule'));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (getSendCount() >= FREE_SEND_TIMES) {
|
||||||
|
openCaptchaModal();
|
||||||
|
} else {
|
||||||
|
doSendCode();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 真正调用接口发送验证码
|
||||||
|
const doSendCode = (captchaCode?: string) => {
|
||||||
|
if (captchaCode !== undefined) {
|
||||||
|
if (!captchaCode) {
|
||||||
|
message.error('请输入图形验证码');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (captchaText.value !== captchaCode.toLowerCase()) {
|
||||||
|
message.error('图形验证码不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
codeLoading.value = true;
|
||||||
|
const sendPromise =
|
||||||
|
activeTab.value === 'email'
|
||||||
|
? sendEmailCaptcha({ email: form.email }, { skipTenant: true })
|
||||||
|
: sendSmsCaptchaByAdmin({ phone: form.phone }, { skipTenant: true });
|
||||||
|
|
||||||
|
sendPromise
|
||||||
|
.then(() => {
|
||||||
|
message.success(
|
||||||
|
activeTab.value === 'email'
|
||||||
|
? t('login.forgetPage.sentEmail')
|
||||||
|
: t('login.forgetPage.getCode')
|
||||||
|
);
|
||||||
|
captchaVisible.value = false;
|
||||||
|
increaseSendCount();
|
||||||
|
startCountdown();
|
||||||
|
})
|
||||||
|
.catch((e: Error) => {
|
||||||
|
message.error(e.message);
|
||||||
|
refreshCaptcha();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
codeLoading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const startCountdown = () => {
|
||||||
|
countdownTime.value = 60;
|
||||||
|
countdownTimer = window.setInterval(() => {
|
||||||
|
if (countdownTime.value <= 1) {
|
||||||
|
countdownTimer && clearInterval(countdownTimer);
|
||||||
|
countdownTimer = null;
|
||||||
|
}
|
||||||
|
countdownTime.value--;
|
||||||
|
}, 1000);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goLogin = () => {
|
||||||
|
router.push('/login');
|
||||||
|
};
|
||||||
|
|
||||||
|
// 提交重置
|
||||||
|
const submit = () => {
|
||||||
|
if (!formRef.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
formRef.value
|
||||||
|
.validate()
|
||||||
|
.then(() => {
|
||||||
|
loading.value = true;
|
||||||
|
const params: Record<string, unknown> = {
|
||||||
|
newPassword: form.newPassword,
|
||||||
|
confirmPassword: form.confirmPassword
|
||||||
|
};
|
||||||
|
if (activeTab.value === 'email') {
|
||||||
|
params.email = form.email;
|
||||||
|
params.emailCode = form.emailCode;
|
||||||
|
} else {
|
||||||
|
params.phone = form.phone;
|
||||||
|
params.smsCode = form.code;
|
||||||
|
}
|
||||||
|
resetPassword(params as any)
|
||||||
|
.then((msg) => {
|
||||||
|
message.success(msg || t('login.forgetPage.success'));
|
||||||
|
loading.value = false;
|
||||||
|
router.push('/login');
|
||||||
|
})
|
||||||
|
.catch((e: Error) => {
|
||||||
|
message.error(e.message);
|
||||||
|
loading.value = false;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
if (countdownTimer) clearInterval(countdownTimer);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.login-wrapper {
|
||||||
|
padding: 48px 16px 0 16px;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: var(--grey-5);
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
min-height: 100vh;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.forget-subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: #8c8c8c;
|
||||||
|
margin: -8px 0 16px;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
width: 380px;
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0 28px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
padding: 22px 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-btn {
|
||||||
|
cursor: pointer;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-title {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
line-height: 50px;
|
||||||
|
|
||||||
|
.active {
|
||||||
|
color: #007dff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.forget-tabs {
|
||||||
|
:deep(.ant-tabs-nav) {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-input-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
|
||||||
|
:deep(.ant-input-affix-wrapper) {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-captcha {
|
||||||
|
width: 102px;
|
||||||
|
height: 40px;
|
||||||
|
margin-left: 10px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-copyright {
|
||||||
|
color: #eee;
|
||||||
|
text-align: center;
|
||||||
|
padding: 48px 0 22px 0;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-login {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-left: 6px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-height: 640px) {
|
||||||
|
.login-wrapper {
|
||||||
|
padding-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
margin-top: -260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-copyright {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
.login-form {
|
||||||
|
left: 50%;
|
||||||
|
right: auto;
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: auto;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -93,9 +93,14 @@
|
|||||||
</a-input-password>
|
</a-input-password>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-checkbox v-model:checked="form.remember">
|
<div class="flex justify-between">
|
||||||
{{ t('login.remember') }}
|
<a-checkbox v-model:checked="form.remember">
|
||||||
</a-checkbox>
|
{{ t('login.remember') }}
|
||||||
|
</a-checkbox>
|
||||||
|
<a class="login-forget" @click="goForget">{{
|
||||||
|
t('login.forget')
|
||||||
|
}}</a>
|
||||||
|
</div>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item>
|
<a-form-item>
|
||||||
<a-button
|
<a-button
|
||||||
@@ -137,7 +142,7 @@
|
|||||||
<a-button
|
<a-button
|
||||||
class="login-captcha"
|
class="login-captcha"
|
||||||
:disabled="!!countdownTime"
|
:disabled="!!countdownTime"
|
||||||
@click="openImgCodeModal"
|
@click="handleSendCode"
|
||||||
>
|
>
|
||||||
<span v-if="!countdownTime">发送验证码</span>
|
<span v-if="!countdownTime">发送验证码</span>
|
||||||
<span v-else>已发送 {{ countdownTime }} s</span>
|
<span v-else>已发送 {{ countdownTime }} s</span>
|
||||||
@@ -186,7 +191,7 @@
|
|||||||
size="large"
|
size="large"
|
||||||
placeholder="请输入图形验证码"
|
placeholder="请输入图形验证码"
|
||||||
allow-clear
|
allow-clear
|
||||||
@pressEnter="sendCode"
|
@pressEnter="() => sendCode(imgCode.value)"
|
||||||
/>
|
/>
|
||||||
<a-button class="login-captcha">
|
<a-button class="login-captcha">
|
||||||
<img alt="" :src="captcha" @click="changeCaptcha" />
|
<img alt="" :src="captcha" @click="changeCaptcha" />
|
||||||
@@ -197,12 +202,41 @@
|
|||||||
size="large"
|
size="large"
|
||||||
type="primary"
|
type="primary"
|
||||||
:loading="codeLoading"
|
:loading="codeLoading"
|
||||||
@click="sendCode"
|
@click="() => sendCode(imgCode.value)"
|
||||||
>
|
>
|
||||||
立即发送
|
立即发送
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
|
|
||||||
|
<!-- 多租户选择登录 -->
|
||||||
|
<a-modal
|
||||||
|
:width="420"
|
||||||
|
:footer="null"
|
||||||
|
:mask-closable="false"
|
||||||
|
title="请选择要登录的租户"
|
||||||
|
v-model:visible="showSelectTenantModal"
|
||||||
|
>
|
||||||
|
<div class="flex flex-col justify-start">
|
||||||
|
<a-list item-layout="horizontal" :data-source="pendingTenants">
|
||||||
|
<template #renderItem="{ item }">
|
||||||
|
<a-list-item
|
||||||
|
class="cursor-pointer hover:border-gray-100"
|
||||||
|
@click="onSelectTenant(item)"
|
||||||
|
>
|
||||||
|
<a-list-item-meta :description="`租户ID: ${item.tenantId}`">
|
||||||
|
<template #title>
|
||||||
|
{{ item.tenantName }}
|
||||||
|
</template>
|
||||||
|
</a-list-item-meta>
|
||||||
|
<template #actions>
|
||||||
|
<RightOutlined />
|
||||||
|
</template>
|
||||||
|
</a-list-item>
|
||||||
|
</template>
|
||||||
|
</a-list>
|
||||||
|
</div>
|
||||||
|
</a-modal>
|
||||||
|
|
||||||
<!-- 多账户选择登录 -->
|
<!-- 多账户选择登录 -->
|
||||||
<a-modal
|
<a-modal
|
||||||
:width="500"
|
:width="500"
|
||||||
@@ -245,21 +279,24 @@
|
|||||||
LockOutlined,
|
LockOutlined,
|
||||||
UserOutlined,
|
UserOutlined,
|
||||||
QrcodeOutlined,
|
QrcodeOutlined,
|
||||||
MobileOutlined
|
MobileOutlined,
|
||||||
|
RightOutlined
|
||||||
} from '@ant-design/icons-vue';
|
} from '@ant-design/icons-vue';
|
||||||
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
|
import { goHomeRoute, cleanPageTabs } from '@/utils/page-tab-util';
|
||||||
import {
|
import {
|
||||||
loginByUserId,
|
loginByUserId,
|
||||||
loginByEmail,
|
loginByEmail,
|
||||||
loginBySuperAdminSms,
|
loginBySuperAdminSms,
|
||||||
getCaptcha
|
loginBySelectTenant,
|
||||||
|
getCaptcha,
|
||||||
|
sendSmsCaptcha
|
||||||
} from '@/api/passport/login';
|
} from '@/api/passport/login';
|
||||||
|
import type { TenantOption } from '@/api/passport/login/model';
|
||||||
import QrLogin from '@/components/QrLogin/index.vue';
|
import QrLogin from '@/components/QrLogin/index.vue';
|
||||||
|
|
||||||
import { User } from '@/api/system/user/model';
|
import { User } from '@/api/system/user/model';
|
||||||
type LoginForm = User & { account?: string };
|
type LoginForm = User & { account?: string };
|
||||||
import { TEMPLATE_ID, THEME_STORE_NAME } from '@/config/setting';
|
import { TEMPLATE_ID, THEME_STORE_NAME } from '@/config/setting';
|
||||||
import { sendSmsCaptcha } from '@/api/passport/login';
|
|
||||||
import useFormData from '@/utils/use-form-data';
|
import useFormData from '@/utils/use-form-data';
|
||||||
import { FormInstance } from 'ant-design-vue/es/form';
|
import { FormInstance } from 'ant-design-vue/es/form';
|
||||||
import { configWebsiteField } from '@/api/cms/cmsWebsiteField';
|
import { configWebsiteField } from '@/api/cms/cmsWebsiteField';
|
||||||
@@ -367,6 +404,10 @@
|
|||||||
// 多用户选择账号登录
|
// 多用户选择账号登录
|
||||||
const showSelectLoginUser = ref<boolean>(false);
|
const showSelectLoginUser = ref<boolean>(false);
|
||||||
const admins = ref<User[]>([]);
|
const admins = ref<User[]>([]);
|
||||||
|
// 多租户选择登录(手机号登录时同一手机号对应多个租户)
|
||||||
|
const showSelectTenantModal = ref<boolean>(false);
|
||||||
|
const pendingTenants = ref<TenantOption[]>([]);
|
||||||
|
const selectingTenant = ref<boolean>(false);
|
||||||
// const tenantId = getTenantId();
|
// const tenantId = getTenantId();
|
||||||
|
|
||||||
// 表格选中数据
|
// 表格选中数据
|
||||||
@@ -428,42 +469,82 @@
|
|||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
/* 显示发送短信验证码弹窗 */
|
// 同一个手机号前 3 次发送不需要图形验证码
|
||||||
const openImgCodeModal = () => {
|
const FREE_SEND_TIMES = 3;
|
||||||
|
|
||||||
|
// 根据手机号生成发送次数缓存 key
|
||||||
|
const getSendCountKey = () => `login_sms_send_count_${form.phone}`;
|
||||||
|
|
||||||
|
// 读取当前手机号已发送次数
|
||||||
|
const getSendCount = () => {
|
||||||
|
const key = getSendCountKey();
|
||||||
|
if (!key) return 0;
|
||||||
|
const count = localStorage.getItem(key);
|
||||||
|
return count ? Number(count) || 0 : 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 增加发送次数
|
||||||
|
const increaseSendCount = () => {
|
||||||
|
const key = getSendCountKey();
|
||||||
|
if (!key) return;
|
||||||
|
localStorage.setItem(key, String(getSendCount() + 1));
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 处理发送短信验证码按钮点击 */
|
||||||
|
const handleSendCode = () => {
|
||||||
if (!form.phone) {
|
if (!form.phone) {
|
||||||
message.error('请输入手机号码');
|
message.error('请输入手机号码');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
imgCode.value = '';
|
if (getSendCount() >= FREE_SEND_TIMES) {
|
||||||
changeCaptcha();
|
imgCode.value = '';
|
||||||
visible.value = true;
|
changeCaptcha();
|
||||||
|
visible.value = true;
|
||||||
|
} else {
|
||||||
|
sendCode();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/* 发送短信验证码 */
|
/* 发送短信验证码 */
|
||||||
const sendCode = () => {
|
const sendCode = (captchaCode?: string) => {
|
||||||
if (!imgCode.value) {
|
if (captchaCode !== undefined) {
|
||||||
message.error('请输入图形验证码');
|
if (!captchaCode) {
|
||||||
return;
|
message.error('请输入图形验证码');
|
||||||
}
|
return;
|
||||||
if (text.value !== imgCode.value.toLowerCase()) {
|
}
|
||||||
message.error('图形验证码不正确');
|
if (text.value !== captchaCode.toLowerCase()) {
|
||||||
return;
|
message.error('图形验证码不正确');
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
codeLoading.value = true;
|
codeLoading.value = true;
|
||||||
sendSmsCaptcha({ phone: form.phone }).then(() => {
|
sendSmsCaptcha({ phone: form.phone })
|
||||||
message.success('短信验证码发送成功, 请注意查收!');
|
.then(() => {
|
||||||
visible.value = false;
|
message.success('短信验证码发送成功, 请注意查收!');
|
||||||
codeLoading.value = false;
|
visible.value = false;
|
||||||
countdownTime.value = 30;
|
increaseSendCount();
|
||||||
// 开始对按钮进行倒计时
|
countdownTime.value = 30;
|
||||||
countdownTimer = window.setInterval(() => {
|
// 开始对按钮进行倒计时
|
||||||
if (countdownTime.value <= 1) {
|
countdownTimer = window.setInterval(() => {
|
||||||
countdownTimer && clearInterval(countdownTimer);
|
if (countdownTime.value <= 1) {
|
||||||
countdownTimer = null;
|
countdownTimer && clearInterval(countdownTimer);
|
||||||
}
|
countdownTimer = null;
|
||||||
countdownTime.value--;
|
}
|
||||||
}, 1000);
|
countdownTime.value--;
|
||||||
});
|
}, 1000);
|
||||||
|
})
|
||||||
|
.catch((e: Error) => {
|
||||||
|
message.error(e.message);
|
||||||
|
changeCaptcha();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
codeLoading.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/* 跳转到忘记密码页 */
|
||||||
|
const goForget = () => {
|
||||||
|
router.push('/forget');
|
||||||
};
|
};
|
||||||
|
|
||||||
// const { clearValidate, validate, validateInfos } = useForm(form, rules);
|
// const { clearValidate, validate, validateInfos } = useForm(form, rules);
|
||||||
@@ -486,8 +567,14 @@
|
|||||||
loading.value = true;
|
loading.value = true;
|
||||||
form.code = form.smsCode?.toLowerCase();
|
form.code = form.smsCode?.toLowerCase();
|
||||||
loginBySuperAdminSms(form)
|
loginBySuperAdminSms(form)
|
||||||
.then((msg) => {
|
.then((outcome) => {
|
||||||
message.success(msg);
|
if (outcome.status === 'selectTenant') {
|
||||||
|
pendingTenants.value = outcome.tenants;
|
||||||
|
showSelectTenantModal.value = true;
|
||||||
|
loading.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
message.success(outcome.message);
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
resetFields();
|
resetFields();
|
||||||
cleanPageTabs();
|
cleanPageTabs();
|
||||||
@@ -501,6 +588,29 @@
|
|||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/* 选择租户后二次登录 */
|
||||||
|
const onSelectTenant = (item: TenantOption) => {
|
||||||
|
if (selectingTenant.value || item.tenantId == null) return;
|
||||||
|
selectingTenant.value = true;
|
||||||
|
loginBySelectTenant({
|
||||||
|
phone: form.phone,
|
||||||
|
code: form.smsCode || '',
|
||||||
|
tenantId: item.tenantId,
|
||||||
|
remember: form.remember
|
||||||
|
})
|
||||||
|
.then((outcome) => {
|
||||||
|
showSelectTenantModal.value = false;
|
||||||
|
message.success(outcome.message);
|
||||||
|
resetFields();
|
||||||
|
cleanPageTabs();
|
||||||
|
goHome();
|
||||||
|
})
|
||||||
|
.catch((e: Error) => message.error(e.message))
|
||||||
|
.finally(() => {
|
||||||
|
selectingTenant.value = false;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
/* 邮箱登录(跨租户) */
|
/* 邮箱登录(跨租户) */
|
||||||
const onSelectUser = (item: User) => {
|
const onSelectUser = (item: User) => {
|
||||||
form.tenantId = item.tenantId;
|
form.tenantId = item.tenantId;
|
||||||
|
|||||||
Reference in New Issue
Block a user