Browse Source

忘记密码功能上传

master_hella_20240701
parent
commit
315c06d9d5
  1. 57
      src/api/system/user/index.ts
  2. 3
      src/permission.ts
  3. 16
      src/router/modules/remaining.ts
  4. 10
      src/views/login/aa.vue
  5. 392
      src/views/login/components/LoginForm.vue
  6. 71
      src/views/login/forgetPassword.vue
  7. 77
      src/views/login/updatePassword.vue

57
src/api/system/user/index.ts

@ -1,28 +1,29 @@
import request from '@/config/axios'
export interface UserVO {
id: number
username: string
nickname: string
deptId: number
postIds: string[]
email: string
mobile: string
sex: number
avatar: string
loginIp: string
status: number
remark: string
loginDate: Date
createTime: Date
userType :string
id : number
username : string
nickname : string
deptId : number
postIds : string[]
email : string
mobile : string
sex : number
avatar : string
loginIp : string
status : number
remark : string
loginDate : Date
createTime : Date
userType : string
mailKey : string
}
export const getUserPage = async (params) => {
console.log(params)
if (params.isSearch) {
delete params.isSearch
const data = {...params}
const data = { ...params }
return await request.post({ url: '/system/user/senior', data })
} else {
return await request.get({ url: '/system/user/page', params })
@ -35,22 +36,22 @@ export const getUserPage = async (params) => {
// }
// 查询用户详情
export const getUser = (id: number) => {
export const getUser = (id : number) => {
return request.get({ url: '/system/user/get?id=' + id })
}
// 新增用户
export const createUser = (data: UserVO) => {
export const createUser = (data : UserVO) => {
return request.post({ url: '/system/user/create', data })
}
// 修改用户
export const updateUser = (data: UserVO) => {
export const updateUser = (data : UserVO) => {
return request.put({ url: '/system/user/update', data })
}
// 删除用户
export const deleteUser = (id: number) => {
export const deleteUser = (id : number) => {
return request.delete({ url: '/system/user/delete?id=' + id })
}
@ -65,7 +66,7 @@ export const importUserTemplate = () => {
}
// 用户密码重置
export const resetUserPwd = (id: number, password: string) => {
export const resetUserPwd = (id : number, password : string) => {
const data = {
id,
password
@ -74,7 +75,7 @@ export const resetUserPwd = (id: number, password: string) => {
}
// 用户状态修改
export const updateUserStatus = (id: number, status: number) => {
export const updateUserStatus = (id : number, status : number) => {
const data = {
id,
status
@ -83,6 +84,16 @@ export const updateUserStatus = (id: number, status: number) => {
}
// 获取用户精简信息列表
export const getSimpleUserList = (): Promise<UserVO[]> => {
export const getSimpleUserList = () : Promise<UserVO[]> => {
return request.get({ url: '/system/user/list-all-simple' })
}
// 忘记密码
export const forgetPassword = (data : UserVO) => {
return request.put({ url: '/system/user/forgetPassword', data })
}
// 忘记密码->修改密码
export const updatePassword = (data : UserVO) => {
return request.put({ url: '/system/user/updatePassword', data })
}

3
src/permission.ts

@ -15,7 +15,8 @@ const { loadStart, loadDone } = usePageLoading()
// 路由不重定向白名单
const whiteList = [
'/login',
'/aa',
'/forgetPassword',
'/updatePassword',
'/social-login',
'/auth-redirect',
'/bind',

16
src/router/modules/remaining.ts

@ -185,9 +185,19 @@ const remainingRouter: AppRouteRecordRaw[] = [
noTagsView: true
}
},{
path: '/aa',
component: () => import('@/views/login/aa.vue'),
name: 'Aa',
path: '/forgetPassword',
component: () => import('@/views/login/forgetPassword.vue'),
name: 'ForgetPassword',
meta: {
hidden: true,
title: t('router.login'),
noTagsView: true
}
},
{
path: '/updatePassword',
component: () => import('@/views/login/updatePassword.vue'),
name: 'UpdatePassword',
meta: {
hidden: true,
title: t('router.login'),

10
src/views/login/aa.vue

@ -1,10 +0,0 @@
<template>
<div>11</div>
</template>
<script lang="ts" setup>
</script>
<style lang="scss" scoped>
</style>

392
src/views/login/components/LoginForm.vue

@ -1,5 +1,6 @@
<template>
<el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form" label-position="top" label-width="120px" size="large">
<el-form v-show="getShow" ref="formLogin" :model="loginData.loginForm" :rules="LoginRules" class="login-form"
label-position="top" label-width="120px" size="large">
<el-row style="margin-right: -10px; margin-left: -10px">
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
@ -8,23 +9,27 @@
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
<el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')" :prefix-icon="iconHouse" link type="primary" />
<el-input v-model="loginData.loginForm.tenantName" :placeholder="t('login.tenantNamePlaceholder')"
:prefix-icon="iconHouse" link type="primary" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="username">
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')" :prefix-icon="iconAvatar" style="height: 42px;" />
<el-input v-model="loginData.loginForm.username" :placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar" style="height: 42px;" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="password">
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')" :prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
<el-input v-model="loginData.loginForm.password" :placeholder="t('login.passwordPlaceholder')"
:prefix-icon="iconLock" show-password type="password" @keyup.enter="getCode()" style="height: 42px;" />
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item prop="code">
<div class="flex w-[100%]">
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')" style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
<el-input v-model="loginData.loginForm.code" :placeholder="t('login.codePlaceholder')"
style="width: 76%;margin-right: 10px;height: 42px;" @keyup.enter="handleLogin()">
<template #prefix>
<img src="@/assets/imgs/code.png" alt="" style="width: 16px;height: 16px;" />
</template>
@ -44,14 +49,17 @@
</el-checkbox>
</el-col>
<el-col :offset="6" :span="12">
<el-link style="float: right" type="primary">{{ t('login.forgetPassword') }}</el-link>
<el-link style="float: right" type="primary"
@click="handleUpdate()">{{ t('login.forgetPassword') }}</el-link>
<!-- <el-button type="text" icon="Edit">忘记密码按钮</el-button> -->
</el-col>
</el-row>
</el-form-item>
</el-col>
<el-col :span="24" style="padding-right: 10px; padding-left: 10px">
<el-form-item>
<XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary" @click="handleLogin()" />
<XButton :loading="loginLoading" :title="t('login.login')" class="w-[100%]" type="primary"
@click="handleLogin()" />
</el-form-item>
</el-col>
<!-- <Verify
@ -65,213 +73,221 @@
</el-form>
</template>
<script lang="ts" setup>
import { ElLoading } from 'element-plus'
import LoginFormTitle from './LoginFormTitle.vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { ElLoading } from 'element-plus'
import LoginFormTitle from './LoginFormTitle.vue'
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import { useIcon } from '@/hooks/web/useIcon'
import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { getCodeImg } from "@/api/login";
import * as authUtil from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import * as LoginApi from '@/api/login'
import { LoginStateEnum, useFormValid, useLoginState } from './useLogin'
import { getCodeImg } from "@/api/login";
import router from "@/router";
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import * as DeptApi from '@/api/system/dept'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import * as DeptApi from '@/api/system/dept'
defineOptions({ name: 'LoginForm' })
defineOptions({ name: 'LoginForm' })
const { t } = useI18n()
const message = useMessage()
const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
const formLogin = ref()
const { validForm } = useFormValid(formLogin)
const { setLoginState, getLoginState } = useLoginState()
const { currentRoute, push, replace } = useRouter()
const permissionStore = usePermissionStore()
const redirect = ref<string>('')
const loginLoading = ref(false)
const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle clickWord
const { t } = useI18n()
const message = useMessage()
const iconHouse = useIcon({ icon: 'ep:house' })
const iconAvatar = useIcon({ icon: 'ep:avatar' })
const iconLock = useIcon({ icon: 'ep:lock' })
const formLogin = ref()
const { validForm } = useFormValid(formLogin)
const { setLoginState, getLoginState } = useLoginState()
const { currentRoute, push , replace} = useRouter()
const permissionStore = usePermissionStore()
const redirect = ref<string>('')
const loginLoading = ref(false)
const verify = ref()
const captchaType = ref('blockPuzzle') // blockPuzzle clickWord
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
//
const captchaEnabled = ref(true);
const codeUrl = ref("");
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
//
const captchaEnabled = ref(true);
const codeUrl = ref("");
const LoginRules = {
tenantName: [required],
username: [required],
password: [required]
}
const loginData = reactive({
isShowPassword: false,
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
loginForm: {
tenantName: '闻荫源码',
username: 'admin',
password: '123456',
captchaVerification: '',
rememberMe: false,
code: '',
uuid: ''
const LoginRules = {
tenantName: [required],
username: [required],
password: [required]
}
})
const loginData = reactive({
isShowPassword: false,
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
loginForm: {
tenantName: '闻荫源码',
username: 'admin',
password: '123456',
captchaVerification: '',
rememberMe: false,
code: '',
uuid: ''
}
})
const socialList = [
{ icon: 'ant-design:github-filled', type: 0 },
{ icon: 'ant-design:wechat-filled', type: 30 },
{ icon: 'ant-design:alipay-circle-filled', type: 0 },
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 }
]
const socialList = [
{ icon: 'ant-design:github-filled', type: 0 },
{ icon: 'ant-design:wechat-filled', type: 30 },
{ icon: 'ant-design:alipay-circle-filled', type: 0 },
{ icon: 'ant-design:dingtalk-circle-filled', type: 20 }
]
//
// const getCode = async () => {
// //
// if (loginData.captchaEnable === 'false') {
// await handleLogin({})
// } else {
// //
// //
// verify.value.show()
// }
// }
function getCode() {
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img;
loginData.loginForm.uuid = res.uuid;
}
});
}
//ID
const getTenantId = async () => {
if (loginData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
authUtil.setTenantId(res)
//
// const getCode = async () => {
// //
// if (loginData.captchaEnable === 'false') {
// await handleLogin({})
// } else {
// //
// //
// verify.value.show()
// }
// }
function getCode() {
getCodeImg().then(res => {
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
if (captchaEnabled.value) {
codeUrl.value = "data:image/gif;base64," + res.img;
loginData.loginForm.uuid = res.uuid;
}
});
}
}
//
const getCookie = () => {
const loginForm = authUtil.getLoginForm()
if (loginForm) {
loginData.loginForm = {
...loginData.loginForm,
username: loginForm.username ? loginForm.username : loginData.loginForm.username,
password: loginForm.password ? loginForm.password : loginData.loginForm.password,
rememberMe: loginForm.rememberMe ? true : false,
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
//ID
const getTenantId = async () => {
if (loginData.tenantEnable === 'true') {
const res = await LoginApi.getTenantIdByName(loginData.loginForm.tenantName)
authUtil.setTenantId(res)
}
}
}
const loading = ref() // ElLoading.service
//
const handleLogin = async (params) => {
console.log('登录-185')
loginLoading.value = true
try {
await getTenantId()
const data = await validForm()
if (!data) {
return
}
const res = await LoginApi.login(loginData.loginForm)
if (!res) {
console.log('登录-195')
getCode()
return
}
loading.value = ElLoading.service({
lock: true,
text: '正在加载系统中...',
background: 'rgba(0, 0, 0, 0.7)'
})
if (loginData.loginForm.rememberMe) {
authUtil.setLoginForm(loginData.loginForm)
} else {
authUtil.removeLoginForm()
}
authUtil.setToken(res)
if (!redirect.value) {
redirect.value = '/'
//
const getCookie = () => {
const loginForm = authUtil.getLoginForm()
if (loginForm) {
loginData.loginForm = {
...loginData.loginForm,
username: loginForm.username ? loginForm.username : loginData.loginForm.username,
password: loginForm.password ? loginForm.password : loginData.loginForm.password,
rememberMe: loginForm.rememberMe ? true : false,
tenantName: loginForm.tenantName ? loginForm.tenantName : loginData.loginForm.tenantName
}
}
// SSO
if (redirect.value.indexOf('sso') !== -1) {
window.location.href = window.location.href.replace('/login?redirect=', '')
} else {
console.log(redirect.value)
replace({ path: redirect.value || permissionStore.addRouters[0].path })
}
//
const { wsCache } = useCache()
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
} finally {
console.log('登录-224')
getCode()
loginLoading.value = false
loading?.value?.close()
}
}
//
const doSocialLogin = async (type: number) => {
if (type === 0) {
message.error('此方式未配置')
} else {
const handleUpdate = () => {
router.push({
name: 'ForgetPassword',
})
};
const loading = ref() // ElLoading.service
//
const handleLogin = async (params) => {
console.log('登录-185')
loginLoading.value = true
if (loginData.tenantEnable === 'true') {
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
const res = await LoginApi.getTenantIdByName(value)
authUtil.setTenantId(res)
try {
await getTenantId()
const data = await validForm()
if (!data) {
return
}
const res = await LoginApi.login(loginData.loginForm)
if (!res) {
console.log('登录-195')
getCode()
return
}
loading.value = ElLoading.service({
lock: true,
text: '正在加载系统中...',
background: 'rgba(0, 0, 0, 0.7)'
})
if (loginData.loginForm.rememberMe) {
authUtil.setLoginForm(loginData.loginForm)
} else {
authUtil.removeLoginForm()
}
authUtil.setToken(res)
if (!redirect.value) {
redirect.value = '/'
}
// SSO
if (redirect.value.indexOf('sso') !== -1) {
window.location.href = window.location.href.replace('/login?redirect=', '')
} else {
console.log(redirect.value)
replace({ path: redirect.value || permissionStore.addRouters[0].path })
}
//
const { wsCache } = useCache()
wsCache.set(CACHE_KEY.DEPT, await DeptApi.getSimpleDeptList())
} finally {
console.log('登录-224')
getCode()
loginLoading.value = false
loading?.value?.close()
}
// redirectUri
const redirectUri =
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
//
const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
console.log(33)
window.location.href = res
}
}
watch(
() => currentRoute.value,
(route: RouteLocationNormalizedLoaded) => {
redirect.value = route?.query?.redirect as string
},
{
immediate: true
//
const doSocialLogin = async (type : number) => {
if (type === 0) {
message.error('此方式未配置')
} else {
loginLoading.value = true
if (loginData.tenantEnable === 'true') {
await message.prompt('请输入租户名称', t('common.reminder')).then(async ({ value }) => {
const res = await LoginApi.getTenantIdByName(value)
authUtil.setTenantId(res)
})
}
// redirectUri
const redirectUri =
location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
//
const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
console.log(33)
window.location.href = res
}
}
)
onMounted(() => {
getCode();
getCookie()
})
watch(
() => currentRoute.value,
(route : RouteLocationNormalizedLoaded) => {
redirect.value = route?.query?.redirect as string
},
{
immediate: true
}
)
onMounted(() => {
getCode();
getCookie()
})
</script>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
}
.login-code {
float: right;
width: 100%;
height: 38px;
img {
.login-code {
float: right;
width: 100%;
height: auto;
max-width: 100px;
vertical-align: middle;
cursor: pointer;
height: 38px;
img {
width: 100%;
height: auto;
max-width: 100px;
vertical-align: middle;
cursor: pointer;
}
}
}
</style>

71
src/views/login/forgetPassword.vue

@ -0,0 +1,71 @@
<template>
<div v-loading="loading" style="display: flex; justify-content: center; align-items: center;">
<el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
<div class="title" style="font-size:25px" margin-left="0px">忘记密码</div>
<el-row type="flex" justify="center" align="middle">
<el-col :span="13">
<el-form-item label="请输入用户名" prop="username" align="center">
<el-input v-model="loginData.username" placeholder="请输入用户名" />
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="请输入邮箱" prop="email">
<el-input v-model="loginData.email" placeholder="请输入邮箱" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</div>
</template>
<script lang="ts" setup name="forgetPassword">
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import { setTenantId, setToken } from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
import * as UserApi from '@/api/system/user'
const { t } = useI18n()
const message = useMessage()
const permissionStore = usePermissionStore()
const formSmsLogin = ref()
const loginLoading = ref(false)
const iconHouse = useIcon({ icon: 'ep:house' })
const iconCellphone = useIcon({ icon: 'ep:cellphone' })
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
const rules = {
username: [required],
email: [required]
}
const loginData = reactive({
username: '',
email: '',
})
const loading = ref(false);
const submitForm = async () => {
try {
const data = loginData as unknown as UserApi.UserVO
await UserApi.forgetPassword(data)
message.success(t('common.updateSuccess'))
//
} finally {
// formLoading.value = false
}
}
</script>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
.smsbtn {
margin-top: 33px;
}
</style>

77
src/views/login/updatePassword.vue

@ -0,0 +1,77 @@
<template>
<div v-loading="loading" style="display: flex; justify-content: center; align-items: center;">
<el-form ref="formSmsLogin" :model="loginData" :rules="rules" label-width="130px" label-position="top" size="large">
<div class="title" style="font-size:25px" margin-left="0px">重置密码</div>
<el-row type="flex" justify="center" align="middle">
<el-col :span="13">
<el-form-item label="新密码" prop="password" align="center">
<el-input v-model="loginData.password" placeholder="请输入新密码" />
</el-form-item>
</el-col>
<el-col :span="13">
<el-form-item label="确认新密码" prop="againPassword">
<el-input v-model="loginData.againPassword" placeholder="请再次新密码" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
</div>
</div>
</template>
<script lang="ts" setup name="bb">
import type { RouteLocationNormalizedLoaded } from 'vue-router'
import { useIcon } from '@/hooks/web/useIcon'
import { setTenantId, setToken } from '@/utils/auth'
import { usePermissionStore } from '@/store/modules/permission'
import { getTenantIdByName, sendSmsCode, smsLogin } from '@/api/login'
import * as UserApi from '@/api/system/user'
const { t } = useI18n()
const message = useMessage()
const permissionStore = usePermissionStore()
const formSmsLogin = ref()
const loginLoading = ref(false)
const iconHouse = useIcon({ icon: 'ep:house' })
const iconCellphone = useIcon({ icon: 'ep:cellphone' })
const iconCircleCheck = useIcon({ icon: 'ep:circle-check' })
const route = useRoute() //
const rules = {
password: [required],
againPassword: [required]
}
const loginData = reactive({
password: '',
againPassword: '',
mailKey: '',
})
const loading = ref(false);
const submitForm = async () => {
try {
loginData.mailKey = route.query.mailKey;
if (loginData.password != loginData.againPassword) {
message.error('两次输入的密码不一致,请重新输入!')
} else {
const data = loginData as unknown as UserApi.UserVO
await UserApi.updatePassword(data)
//
message.success(t('common.updateSuccess'))
}
} finally {
// formLoading.value = false
}
}
</script>
<style lang="scss" scoped>
:deep(.anticon) {
&:hover {
color: var(--el-color-primary) !important;
}
}
.smsbtn {
margin-top: 33px;
}
</style>
Loading…
Cancel
Save