feat: 登录支持记住账号和密码
This commit is contained in:
@@ -59,19 +59,58 @@ const [Form, formApi] = useVbenForm(
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
|
||||||
const REMEMBER_ME_KEY = `REMEMBER_ME_ACCOUNT_${location.hostname}`;
|
const REMEMBER_ME_KEY = `REMEMBER_ME_ACCOUNT_${location.hostname}`;
|
||||||
|
interface RememberMeLoginData {
|
||||||
|
account: string;
|
||||||
|
password: string;
|
||||||
|
}
|
||||||
|
|
||||||
const localAccount = localStorage.getItem(REMEMBER_ME_KEY) || '';
|
function getRememberMeLoginData(): null | RememberMeLoginData {
|
||||||
|
const localValue = localStorage.getItem(REMEMBER_ME_KEY);
|
||||||
|
if (!localValue) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const rememberMe = ref(!!localAccount);
|
try {
|
||||||
|
const parsedValue = JSON.parse(localValue) as Partial<RememberMeLoginData>;
|
||||||
|
if (
|
||||||
|
typeof parsedValue.account === 'string' &&
|
||||||
|
typeof parsedValue.password === 'string'
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
account: parsedValue.account,
|
||||||
|
password: parsedValue.password,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
return {
|
||||||
|
account: localValue,
|
||||||
|
password: '',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const localLoginData = getRememberMeLoginData();
|
||||||
|
|
||||||
|
const rememberMe = ref(!!localLoginData?.account);
|
||||||
|
|
||||||
async function handleSubmit() {
|
async function handleSubmit() {
|
||||||
const { valid } = await formApi.validate();
|
const { valid } = await formApi.validate();
|
||||||
const values = await formApi.getValues();
|
const values = await formApi.getValues();
|
||||||
if (valid) {
|
if (valid) {
|
||||||
localStorage.setItem(
|
if (rememberMe.value) {
|
||||||
REMEMBER_ME_KEY,
|
localStorage.setItem(
|
||||||
rememberMe.value ? values?.account : '',
|
REMEMBER_ME_KEY,
|
||||||
);
|
JSON.stringify({
|
||||||
|
account: `${values?.account ?? ''}`,
|
||||||
|
password: `${values?.password ?? ''}`,
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem(REMEMBER_ME_KEY);
|
||||||
|
}
|
||||||
|
|
||||||
emit('submit', values);
|
emit('submit', values);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -81,8 +120,9 @@ function handleGo(path: string) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (localAccount) {
|
if (localLoginData?.account) {
|
||||||
formApi.setFieldValue('account', localAccount);
|
formApi.setFieldValue('account', localLoginData.account);
|
||||||
|
formApi.setFieldValue('password', localLoginData.password);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
"passwordErrorTip": "Password is incorrect",
|
"passwordErrorTip": "Password is incorrect",
|
||||||
"passwordTip": "Please enter password",
|
"passwordTip": "Please enter password",
|
||||||
"verifyRequiredTip": "Please complete the verification first",
|
"verifyRequiredTip": "Please complete the verification first",
|
||||||
"rememberMe": "Remember Me",
|
"rememberMe": "Remember Account and Password",
|
||||||
"createAnAccount": "Create an Account",
|
"createAnAccount": "Create an Account",
|
||||||
"createAccount": "Create Account",
|
"createAccount": "Create Account",
|
||||||
"alreadyHaveAccount": "Already have an account?",
|
"alreadyHaveAccount": "Already have an account?",
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
"passwordTip": "请输入密码",
|
"passwordTip": "请输入密码",
|
||||||
"verifyRequiredTip": "请先完成验证",
|
"verifyRequiredTip": "请先完成验证",
|
||||||
"passwordErrorTip": "密码错误",
|
"passwordErrorTip": "密码错误",
|
||||||
"rememberMe": "记住账号",
|
"rememberMe": "记住账号和密码",
|
||||||
"createAnAccount": "创建一个账号",
|
"createAnAccount": "创建一个账号",
|
||||||
"createAccount": "创建账号",
|
"createAccount": "创建账号",
|
||||||
"alreadyHaveAccount": "已经有账号了?",
|
"alreadyHaveAccount": "已经有账号了?",
|
||||||
|
|||||||
Reference in New Issue
Block a user