fix: 🐛 修复登录成功路由无法跳转问题和相关代码优化

This commit is contained in:
Ray.Hao
2025-08-04 15:04:11 +08:00
parent 4a224bbd0e
commit 0179b5c470
7 changed files with 96 additions and 221 deletions

View File

@@ -111,8 +111,6 @@
</template>
<script setup lang="ts">
import type { FormInstance } from "element-plus";
import { LocationQuery, RouteLocationRaw, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import AuthAPI, { type LoginFormData } from "@/api/auth.api";
import router from "@/router";
import { useUserStore } from "@/store";
@@ -202,10 +200,11 @@ async function handleLoginSubmit() {
// 3. 获取用户信息(包含用户角色,用于路由生成)
await userStore.getUserInfo();
// 4. 登录成功,让路由守卫处理跳转逻辑
const redirect = resolveRedirectTarget(route.query);
// 4. 登录成功,简单跳转,让路由守卫处理后续逻辑
const redirectPath = (route.query.redirect as string) || "/";
await router.replace(redirect);
// 使用push而不是replace避免与路由守卫冲突
await router.push(decodeURIComponent(redirectPath));
} catch (error) {
// 5. 统一错误处理
getCaptcha(); // 刷新验证码
@@ -215,32 +214,6 @@ async function handleLoginSubmit() {
}
}
/**
* 解析重定向目标
*
* @param query 路由查询参数
* @returns 标准化后的路由地址
*/
function resolveRedirectTarget(query: LocationQuery): RouteLocationRaw {
// 默认跳转路径
const defaultPath = "/";
// 获取原始重定向路径
const rawRedirect = (query.redirect as string) || defaultPath;
try {
// 6. 使用Vue Router解析路径
const resolved = router.resolve(rawRedirect);
return {
path: resolved.path,
query: resolved.query,
};
} catch {
// 7. 异常处理:返回安全路径
return { path: defaultPath };
}
}
// 检查输入大小写
function checkCapsLock(event: KeyboardEvent) {
// 防止浏览器密码自动填充时报错