Skip to content

V
Vue-Dashboard
Commit 754f0f5a by User
Options

添加客户登录

parent 24e0a776
Showing with 97 additions and 15 deletions
dist/index.html
<!doctype html>
<html lang="zh-cmn-Hans">
<head>
<meta name="buildTime" content="2025-03-18 11:10:53">
<meta name="buildTime" content="2025-04-07 13:53:10">
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title>VueDashboard</title>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-CXO-yZSS.js"></script>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-CoDJd4d0.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-9k_B1ZU8.css">
</head>
<body>
......
src/locales/langs/en-us.ts
......@@ -183,7 +183,10 @@ const local: App.I18n.Schema = {
back: 'Back',
validateSuccess: 'Verification passed',
loginSuccess: 'Login successfully',
welcomeBack: 'Welcome back, {FullName} !'
welcomeBack: 'Welcome back, {FullName} !',
customerLogin: 'Customer Login',
switchToAdmin: 'Switch to Admin Login',
switchToCustomer: 'Switch to Customer Login'
},
pwdLogin: {
title: 'Password Login',
......
src/locales/langs/zh-cn.ts
......@@ -183,7 +183,10 @@ const local: App.I18n.Schema = {
back: '返回',
validateSuccess: '验证成功',
loginSuccess: '登录成功',
welcomeBack: '欢迎回来，{FullName} ！'
welcomeBack: '欢迎回来，{FullName} ！',
customerLogin: '客户登录',
switchToAdmin: '切换为管理员登录',
switchToCustomer: '切换为客户登录'
},
pwdLogin: {
title: '密码登录',
......
src/service/api/auth.ts
......@@ -17,6 +17,23 @@ export function fetchLogin(userName: string, password: string) {
});
}
/**
* Customer Login
*
* @param userName User name
* @param password Password
*/
export function fetchCustomerLogin(userName: string, password: string) {
return request<Api.Auth.LoginToken>({
url: '/Auth/customer.json',
method: 'post',
data: {
userName,
password
}
});
}
/** Get user info */
export function fetchGetUserInfo() {
return request<Api.Auth.UserInfo>({ url: '/auth/getUserInfo' });
......
src/store/modules/auth/index.ts
......@@ -4,7 +4,7 @@ import { defineStore } from 'pinia';
import { useLoading } from '@sa/hooks';
import { SetupStoreId } from '@/enum';
import { useRouterPush } from '@/hooks/common/router';
import { fetchGetUserInfo, fetchLogin, fetchLogout } from '@/service/api';
import { fetchGetUserInfo, fetchLogin, fetchLogout, fetchCustomerLogin } from '@/service/api/auth';
import { localStg } from '@/utils/storage';
import { $t } from '@/locales';
import { useRouteStore } from '../route';
......@@ -111,6 +111,44 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
endLoading();
}
/**
* Customer Login
*
* @param userName User name
* @param password Password
* @param [redirect=true] Whether to redirect after login. Default is `true`
*/
async function loginCustomer(userName: string, password: string, redirect = true) {
startLoading();
const { data: loginToken, error } = await fetchCustomerLogin(userName, password);
if (!error) {
const pass = await loginByToken(loginToken);
if (pass) {
await routeStore.initAuthRoute();
if (redirect) {
await redirectFromLogin();
}
if (routeStore.isInitAuthRoute) {
// 强制刷新页面
window.location.reload();
window.$notification?.success({
title: $t('page.login.common.loginSuccess'),
content: $t('page.login.common.welcomeBack', { FullName: userInfo.FullName }),
duration: 4500
});
}
}
} else {
resetStore();
}
endLoading();
}
async function loginByToken(loginToken: Api.Auth.LoginToken) {
// 1. stored in the localStorage, the later requests need it in headers
localStg.set('token', loginToken.SessionId);
......@@ -164,6 +202,7 @@ export const useAuthStore = defineStore(SetupStoreId.Auth, () => {
loginLoading,
resetStore,
login,
loginCustomer,
initUserInfo
};
});
src/views/_builtin/login/modules/pwd-login.vue
<script setup lang="ts">
import { computed, reactive } from 'vue';
import { computed, reactive, ref } from 'vue';
import { $t } from '@/locales';
import { loginModuleRecord } from '@/constants/app';
// import { loginModuleRecord } from '@/constants/app';
import { useRouterPush } from '@/hooks/common/router';
import { useFormRules, useNaiveForm } from '@/hooks/common/form';
import { useAuthStore } from '@/store/modules/auth';
......@@ -13,6 +13,7 @@ defineOptions({
const authStore = useAuthStore();
const { toggleLoginModule } = useRouterPush();
const { formRef, validate } = useNaiveForm();
const isCustomerLogin = ref(true);
interface FormModel {
userName: string;
......@@ -36,9 +37,18 @@ const rules = computed<Record<keyof FormModel, App.Global.FormRule[]>>(() => {
async function handleSubmit() {
await validate();
await authStore.login(model.userName, model.password);
if (isCustomerLogin.value) {
await authStore.loginCustomer(model.userName, model.password);
} else {
await authStore.login(model.userName, model.password);
}
}
function toggleLoginType() {
isCustomerLogin.value = !isCustomerLogin.value;
}
/*
type AccountKey = 'super' | 'admin' | 'user';
interface Account {
......@@ -72,6 +82,7 @@ const accounts = computed<Account[]>(() => [
async function handleAccountLogin(account: Account) {
await authStore.login(account.userName, account.password);
}
*/
</script>
<template>
......@@ -90,27 +101,36 @@ async function handleAccountLogin(account: Account) {
<NSpace vertical :size="24">
<div class="flex-y-center justify-between">
<NCheckbox>{{ $t('page.login.pwdLogin.rememberMe') }}</NCheckbox>
<NButton quaternary @click="toggleLoginModule('reset-pwd')">
<!-- <NButton quaternary @click="toggleLoginModule('reset-pwd')">
{{ $t('page.login.pwdLogin.forgetPassword') }}
</NButton>
</NButton> -->
</div>
<NButton type="primary" size="large" round block :loading="authStore.loginLoading" @click="handleSubmit">
{{ $t('common.confirm') }}
{{ isCustomerLogin ? $t('page.login.common.customerLogin') : $t('common.confirm') }}
</NButton>
<!-- <div class="flex-y-center justify-between gap-12px">
<div class="flex-y-center justify-center gap-12px">
<NButton @click="toggleLoginType">
{{ isCustomerLogin ? $t('page.login.common.switchToAdmin') : $t('page.login.common.switchToCustomer') }}
</NButton>
</div>
<!--
<div class="flex-y-center justify-between gap-12px">
<NButton class="flex-1" block @click="toggleLoginModule('code-login')">
{{ $t(loginModuleRecord['code-login']) }}
</NButton>
<NButton class="flex-1" block @click="toggleLoginModule('register')">
{{ $t(loginModuleRecord.register) }}
</NButton>
</div> -->
<!-- <NDivider class="text-14px text-#666 !m-0">{{ $t('page.login.pwdLogin.otherAccountLogin') }}</NDivider>
</div>
-->
<!--
<NDivider class="text-14px text-#666 !m-0">{{ $t('page.login.pwdLogin.otherAccountLogin') }}</NDivider>
<div class="flex-center gap-12px">
<NButton v-for="item in accounts" :key="item.key" type="primary" @click="handleAccountLogin(item)">
{{ item.label }}
</NButton>
</div> -->
</div>
-->
</NSpace>
</NForm>
</template>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment