Browse Source

优化登录:账号登录改为用户ID登录

dev
科技小王子 5 months ago
parent
commit
4c682f1034
  1. 4
      .env.development
  2. 2
      src/api/passport/login/index.ts
  3. 83
      src/layout/components/header-tools.vue
  4. 2
      src/utils/common.ts
  5. 88
      src/views/passport/login/index.vue

4
.env.development

@ -1,11 +1,11 @@
VITE_APP_NAME=后台管理系统
VITE_SOCKET_URL=wss://server.gxwebsoft.com
VITE_SERVER_URL=https://server.gxwebsoft.com/api
#VITE_API_URL=https://cms-api.websoft.top/api
VITE_API_URL=https://cms-api.websoft.top/api
#VITE_SOCKET_URL=ws://127.0.0.1:9191
#VITE_SERVER_URL=http://127.0.0.1:8000/api
VITE_API_URL=http://127.0.0.1:9000/api
#VITE_API_URL=http://127.0.0.1:9000/api
#VITE_THINK_URL=http://127.0.0.1:9099/api
#/booking/bookingItem

2
src/api/passport/login/index.ts

@ -15,7 +15,7 @@ import { SERVER_API_URL } from '@/config/setting';
*/
export async function login(data: LoginParam) {
const res = await request.post<ApiResult<LoginResult>>(
'https://common-api.websoft.top/api/login',
'/loginByUserId',
data
);
if (res.data.code === 0) {

83
src/layout/components/header-tools.vue

@ -1,10 +1,6 @@
<!-- 顶栏右侧区域 -->
<template>
<div class="ele-admin-header-tool">
<!-- 网站首页 -->
<div class="ele-admin-header-tool-item" v-if="domain" @click="openUrl(`https://${domain}`)">
<HomeOutlined />
</div>
<!-- 消息通知 -->
<div class="ele-admin-header-tool-item" @click="openUrl(`/user/notice`)">
<header-notice/>
@ -20,21 +16,17 @@
<fullscreen-exit-outlined v-if="fullscreen"/>
<fullscreen-outlined v-else/>
</div>
<!-- 语言切换 -->
<div v-if="lang.length > 0" class="ele-admin-header-tool-item">
<i18n-icon/>
</div>
<!-- 用户信息 -->
<div class="ele-admin-header-tool-item">
<a-dropdown placement="bottom" :overlay-style="{ minWidth: '280px' }">
<div class="ele-admin-header-avatar">
<a-avatar :src="website?.websiteLogo">
<template v-if="!website?.websiteLogo" #icon>
<a-avatar :src="loginUser?.avatar">
<template v-if="!loginUser?.avatar" #icon>
<user-outlined/>
</template>
</a-avatar>
<span :class="{ 'hidden-sm-and-down': styleResponsive }">
{{ website?.websiteName }}
{{ loginUser.nickname }}
</span>
<down-outlined style="margin-left: 6px"/>
</div>
@ -50,13 +42,9 @@
}}</span>
</div>
<div class="text-gray-400">
户ID<span class="ele-text-secondary">{{
loginUser.tenantId
户ID<span class="ele-text-secondary" @click="copyText(loginUser.userId)">{{
loginUser.userId
}}</span>
<copy-outlined
style="margin-left: 10px"
@click="copyText(loginUser.tenantId)"
/>
</div>
<div class="text-gray-400">
昵称<span class="ele-text-secondary">{{
@ -68,6 +56,11 @@
loginUser.mobile
}}</span>
</div>
<div class="text-gray-400">
租户<span class="ele-text-secondary" @click="copyText(loginUser.tenantId)">{{
loginUser.tenantId
}}</span>
</div>
<div class="text-gray-400">
角色
<template
@ -98,12 +91,12 @@
</div>
</a-menu-item>
<template v-if="loginUser.username == 'admin' || loginUser.username == 'superAdmin'">
<!-- <a-menu-divider/>-->
<!-- <a-menu-item key="accessKey">-->
<!-- <div class="ele-cell">-->
<!-- <div class="ele-cell-content"> {{ t('layout.header.accessKey') }}</div>-->
<!-- </div>-->
<!-- </a-menu-item>-->
<!-- <a-menu-divider/>-->
<!-- <a-menu-item key="accessKey">-->
<!-- <div class="ele-cell">-->
<!-- <div class="ele-cell-content"> {{ t('layout.header.accessKey') }}</div>-->
<!-- </div>-->
<!-- </a-menu-item>-->
<a-menu-divider/>
<a-menu-item key="system">
<div class="ele-cell">
@ -135,7 +128,7 @@
</template>
<script lang="ts" setup>
import {computed, createVNode, ref, watch} from 'vue';
import {computed, createVNode, ref} from 'vue';
import {useRouter} from 'vue-router';
import {useI18n} from 'vue-i18n';
import {Modal} from 'ant-design-vue/es';
@ -148,7 +141,7 @@ import {
HomeOutlined
} from '@ant-design/icons-vue';
import {storeToRefs} from 'pinia';
import {copyText, navTo, openNew, openUrl} from '@/utils/common';
import {copyText, openNew, openUrl} from '@/utils/common';
import {useThemeStore} from '@/store/modules/theme';
import HeaderNotice from './header-notice.vue';
import PasswordModal from './password-modal.vue';
@ -158,13 +151,8 @@ import {logout} from '@/utils/page-tab-util';
import type {Menu} from '@/api/system/menu/model';
import {isExternalLink} from 'ele-admin-pro';
import {listRoles} from '@/api/system/role';
import {getSiteInfo} from "@/api/layout";
import I18nIcon from './i18n-icon.vue';
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {listCmsLangLog} from "@/api/cms/cmsLangLog";
import {CmsLangLog} from "@/api/cms/cmsLangLog/model";
import {getCmsWebsiteSetting} from "@/api/cms/cmsWebsiteSetting";
import {useWebsiteSettingStore} from "@/store/modules/setting";
//
const themeStore = useThemeStore();
@ -184,7 +172,6 @@ defineProps<{
const {push} = useRouter();
const {t} = useI18n();
const userStore = useUserStore();
const setting = useWebsiteSettingStore();
//
const passwordVisible = ref(false);
@ -195,10 +182,7 @@ const domain = ref(localStorage.getItem('Domain'))
//
const loginUser = computed(() => userStore.info ?? {});
const menuList = ref<Menu[]>([]);
const parentId = ref<number>();
const bordered = ref<boolean>(false);
const website = ref<CmsWebsite>();
const lang = ref<CmsLangLog[]>([]);
/* 用户信息下拉点击 */
const onUserDropClick = ({key}) => {
@ -250,28 +234,6 @@ const toggleFullscreen = () => {
};
const reload = () => {
//
getSiteInfo().then((data) => {
website.value = data;
// ID
localStorage.setItem('WebsiteId', `${data.websiteId}`);
//
if(data.setting){
setting.setSetting(data.setting);
}
getCmsWebsiteSetting(Number(data.websiteId)).then((settingInfo) => {
if (settingInfo) {
setting.setSetting(settingInfo);
if (settingInfo.editor) {
localStorage.setItem('Editor', `${settingInfo.editor}`)
}
}
})
}).catch(() => {
//
localStorage.removeItem('WebsiteId')
localStorage.setItem('NotActive', '1')
});
// roleId
if (!localStorage.getItem('RoleIdByMerchant')) {
@ -283,15 +245,6 @@ const reload = () => {
}
});
}
//
listCmsLangLog({}).then(list => {
lang.value = list;
if (list.length > 0 && !i18n) {
localStorage.setItem('i18n-lang', `${list[0].code}`);
}
})
};
reload();

2
src/utils/common.ts

@ -310,7 +310,7 @@ export const copyText = (text) => {
// 执行浏览器复制命令
// 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)
// Input要在正常的编辑状态下原生复制方法才会生效
message.success(`复制成功 ${text}`);
message.success(`复制成功`);
document.execCommand('copy');
// 复制成功后再将构造的标签 移除

88
src/views/passport/login/index.vue

@ -31,8 +31,16 @@
<div class="login-title flex justify-center items-center px-12">
<h4
class="title-btn"
:class="loginType === 'sms' ? 'active' : ''"
@click="onLoginType('sms')"
>登录</h4
>短信登录</h4
>
<a-divider type="vertical" style="height: 20px"/>
<h4
class="title-btn"
:class="loginType === 'account' ? 'active' : ''"
@click="onLoginType('account')"
>密码登录</h4
>
</div>
<div class="login-bar absolute top-0 right-0 cursor-pointer">
@ -47,13 +55,12 @@
<!-- <span class="absolute top-3 right-1.5 text-sm text-white font-bold cursor-pointer">{{ '登录' }}</span>-->
</div>
<template v-if="loginType === 'account'">
<a-form-item name="username">
<a-form-item name="userId">
<a-input
allow-clear
size="large"
:maxlength="11"
v-model:value="form.username"
:placeholder="`请输入登录账号`"
v-model:value="form.userId"
:placeholder="`请输入用户ID`"
>
<template #prefix>
<UserOutlined/>
@ -259,7 +266,7 @@ const {t} = useI18n();
const {locale} = useI18n();
// , 0 , 1 , 2
const direction = ref(1);
const direction = ref(0);
//
const loading = ref(false);
// tenantId
@ -268,11 +275,13 @@ const loginType = ref('sms');
const config = ref<Config>();
//
const {form} = useFormData<User>({
userId: undefined,
username: '',
phone: '',
password: '',
code: '',
smsCode: '',
tenantId: undefined,
templateId: TEMPLATE_ID,
isSuperAdmin: true,
remember: true
@ -295,14 +304,14 @@ let countdownTimer: number | null = null;
//
const showSelectLoginUser = ref<boolean>(false)
const admins = ref<User[]>([]);
const tenantId = getTenantId();
// const tenantId = getTenantId();
//
const formRef = ref<FormInstance | null>(null);
//
const rules = reactive({
username: [
userId: [
{
required: true,
message: t('login.username'),
@ -408,11 +417,11 @@ const onLoginBySms = () => {
return false;
} else {
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
}
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
})
.catch((e: Error) => {
message.error(e.message);
@ -436,37 +445,26 @@ const submit = () => {
formRef.value
.validate()
.then(() => {
if (form.code?.toLowerCase() !== text.value) {
message.error('验证码错误');
changeCaptcha();
return;
}
// if (form.code?.toLowerCase() !== text.value) {
// message.error('');
// changeCaptcha();
// return;
// }
loading.value = true;
form.code = form.code?.toLowerCase();
form.phone = undefined;
login(form)
.then((msg) => {
if(msg == '请选择登录用户'){
showSelectLoginUser.value = true;
return false;
}
//
message.success(msg);
loading.value = false;
resetFields();
cleanPageTabs();
goHome();
//
// pageOrderGoods({ userId: Number(localStorage.getItem('UserId')),orderStatus: 1}).then(res => {
// if(res?.count == 0){
// message.error('');
// setTimeout(() => {
// push('/login')
// },1000)
// return false;
// }
// //
// message.success(msg);
// loading.value = false;
// resetFields();
// cleanPageTabs();
// goHome();
// })
})
.catch((e: Error) => {
message.error(e.message);
@ -507,9 +505,7 @@ const loginConnect = () => {
/* 获取图形验证码 */
const changeCaptcha = () => {
configWebsiteField({
lang: locale.value
}).then((data) => {
configWebsiteField({lang: locale.value}).then((data) => {
config.value = data;
});
// base64,
@ -536,16 +532,16 @@ watch(
currentRoute,
() => {
// ID
const tenantId = getTenantId();
if (tenantId) {
form.tenantId = Number(tenantId);
showTenantId.value = false;
}
const tid = localStorage.getItem('TenantId');
if (tid) {
form.tenantId = Number(tid);
showTenantId.value = false;
}
// const tenantId = getTenantId();
// if (tenantId) {
// form.tenantId = Number(tenantId);
// showTenantId.value = false;
// }
// const tid = localStorage.getItem('TenantId');
// if (tid) {
// form.tenantId = Number(tid);
// showTenantId.value = false;
// }
},
{immediate: true}
);

Loading…
Cancel
Save