feat(ops-web/auth): add remember-me with session/local storage split

Persistent logins land in localStorage, ephemeral ones in sessionStorage,
and we recall the last username + remember preference on the login form.
Also propagate the indigo brand color through the antd ConfigProvider
theme token so the side nav and avatar match the redesigned login.
This commit is contained in:
2026-04-29 15:59:23 +08:00
parent 2d66e32938
commit a5cef078f5
6 changed files with 133 additions and 40 deletions
+12 -3
View File
@@ -72,11 +72,12 @@
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { StarOutlined, EyeOutlined, EyeInvisibleOutlined } from "@ant-design/icons-vue";
import { OpsApiError } from "@/lib/http";
import { readLoginPreference } from "@/lib/storage";
import { useAuthStore } from "@/stores/auth";
import AnimatedCharacters from "@/components/login-animation/AnimatedCharacters.vue";
@@ -89,7 +90,7 @@ const primaryColor = ref('#4f46e5');
const submitting = ref(false);
const showPassword = ref(false);
const isTyping = ref(false);
const remember = ref(false);
const remember = ref(true);
const errorMessage = ref<string | null>(null);
const formState = reactive({
@@ -97,6 +98,14 @@ const formState = reactive({
password: "",
});
onMounted(() => {
const pref = readLoginPreference();
remember.value = pref.remember;
if (pref.lastUsername) {
formState.username = pref.lastUsername;
}
});
async function handleSubmit(): Promise<void> {
if (submitting.value) {
return;
@@ -111,7 +120,7 @@ async function handleSubmit(): Promise<void> {
submitting.value = true;
try {
await authStore.login(formState.username.trim(), formState.password);
await authStore.login(formState.username.trim(), formState.password, remember.value);
const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/admin-users";
await router.replace(redirect);
} catch (error) {