diff --git a/src/constants/cache-key.ts b/src/constants/cache-key.ts index bf5e0eb..1245287 100644 --- a/src/constants/cache-key.ts +++ b/src/constants/cache-key.ts @@ -12,6 +12,8 @@ class CACHE_KEY { static readonly USER_INFO = `${SYSTEM_NAME}_userInfo`; static readonly REFRESH_TOKEN = `${SYSTEM_NAME}_refreshToken`; static readonly TOKEN_ROLE = `${SYSTEM_NAME}_token_role`; + static readonly IS_LOGIN_KEY = `${SYSTEM_NAME}_is_login`; + static readonly IS_SHOW_NOTICE = `${SYSTEM_NAME}_is_show_notice`; } export default CACHE_KEY; diff --git a/src/i18n/package/en.ts b/src/i18n/package/en.ts index 0edcdbe..c2a3a0f 100644 --- a/src/i18n/package/en.ts +++ b/src/i18n/package/en.ts @@ -245,6 +245,7 @@ const en = { clickHereToMultiRouteExample: "Click here to go to the multi-level route management example page", login_success: "Login success", + switch_roles_Successfully: "Switching Roles Successfully", }; export default en; diff --git a/src/i18n/package/zh.ts b/src/i18n/package/zh.ts index 6746a0c..039374e 100644 --- a/src/i18n/package/zh.ts +++ b/src/i18n/package/zh.ts @@ -239,6 +239,7 @@ const zh = { multiLevelRouteManagement: "多级路由管理", clickHereToMultiRouteExample: "点击这里跳转到多级路由管理案例页面", login_success: "登录成功", + switch_roles_Successfully: "切换角色成功", }; export default zh; diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index fa9e2bd..f30ee8a 100644 --- a/src/store/modules/user.ts +++ b/src/store/modules/user.ts @@ -6,7 +6,11 @@ import { useSettingsStore } from "./settings"; import { getToken, removeToken, setToken } from "@/utils/cache/cookies"; import { resetRouter } from "@/router"; import CACHE_KEY from "@/constants/cache-key"; -import { setLocalData, removeLocalData } from "@/utils/cache/local-storage"; +import { + setLocalData, + getLocalData, + removeLocalData, +} from "@/utils/cache/local-storage"; import { loginApi, userInfoApi } from "@/service/login"; import { ElNotification } from "element-plus"; import { useGreeting } from "@/hooks/useGreeting"; @@ -14,6 +18,8 @@ import routeSettings from "@/config/route"; import { LoginRequestData } from "@/types/store.user"; import i18n from "@/i18n"; const { t } = i18n.global; +const is_login = getLocalData(CACHE_KEY.IS_LOGIN_KEY); +const is_show_login_notice = getLocalData(CACHE_KEY.IS_SHOW_NOTICE) || false; export const useUserStore: any = defineStore("user", () => { const token = ref(getToken() || ""); @@ -34,7 +40,7 @@ export const useUserStore: any = defineStore("user", () => { token.value = res.token; }; - /** 获取用户角色 */ + /** 获取用户角色详情 */ const getInfoRoles = async () => { // 登录问候语 const { showGreetingNotification } = useGreeting(t); @@ -42,7 +48,15 @@ export const useUserStore: any = defineStore("user", () => { const res: any = await userInfoApi(); setLocalData(CACHE_KEY.USER_INFO, res.userInfo); // 显示问候语 - showGreetingNotification(t("login_success"), res.userInfo.userName); + if (!is_login && !is_show_login_notice) { + showGreetingNotification(t("login_success"), res.userInfo.userName); + } else if (is_login && is_show_login_notice) { + showGreetingNotification( + t("switch_roles_Successfully"), + res.userInfo.userName, + ); + setLocalData(CACHE_KEY.IS_SHOW_NOTICE, false); + } // 这里模拟获取用户信息,具体逻辑看前后端约束 userName.value = res.userInfo.userName; // 验证返回的 roles 是否为一个非空数组,否则塞入一个没有任何作用的默认角色,防止路由守卫逻辑进入无限循环 @@ -55,7 +69,7 @@ export const useUserStore: any = defineStore("user", () => { /** 模拟角色变化 */ const changeRoles = async (role: string) => { try { - // 这里userName和password具体是什么,需要看后端SQL表设计和接口约束 + // 这里userName和password具体是什么,需要看后端SQL表设计和接口约束,这里只是个示例 const newRole = role == "admin" ? "admin" : "user"; const params = { userName: newRole, @@ -66,9 +80,11 @@ export const useUserStore: any = defineStore("user", () => { // 判断登录结果 if (res.status === 200) { setToken(res.token); + // 切换角色notification + setLocalData(CACHE_KEY.IS_SHOW_NOTICE, true); } else { showNotification(res.message, "warning"); - return; // 如果登录失败,终止后续操作 + return; } // 刷新页面(可根据需求选择是否必要) ---- 免登录刷新页面 window.location.reload(); @@ -92,6 +108,8 @@ export const useUserStore: any = defineStore("user", () => { const logout = () => { removeToken(); removeLocalData(CACHE_KEY.USER_INFO); + removeLocalData(CACHE_KEY.IS_SHOW_NOTICE); + setLocalData(CACHE_KEY.IS_LOGIN_KEY, false); token.value = ""; roles.value = []; resetRouter(); diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 7e8ee2b..766e3b6 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -160,6 +160,8 @@ import { InternalRuleItem, Values, ValidateOption } from "async-validator"; import { User, Lock } from "@element-plus/icons-vue"; import LanguageSwitcher from "@/components/LanguageSwitcher/index.vue"; import { useUserStore } from "@/store/modules/user"; +import { setLocalData } from "@/utils/cache/local-storage"; +import CACHE_KEY from "@/constants/cache-key"; const sliderVisible = ref(false); //滑动验证ui const isSlider = ref(false); // 是否开启验证 import { useI18n } from "vue-i18n"; @@ -246,7 +248,7 @@ const handleSlideSuccess = () => { sliderVisible.value = false; // 登录 handlerExecutiveLogging(); - }, 1500); + }, 1000); }; // 登录接口请求验证 @@ -257,6 +259,8 @@ const handlerExecutiveLogging = () => { useUserStore() .login(params) .then(() => { + // 登录成功notify标记 + setLocalData(CACHE_KEY.IS_LOGIN_KEY, true); router.push("/"); }) .finally(() => { @@ -287,7 +291,7 @@ const toggleForm = () => { // 注册接口验证 const handlerExecutiveRegister = () => { - // loading.value = true; + loading.value = true; registerApi(form) .then((res: any) => { if (res.status === 200) { @@ -298,9 +302,6 @@ const handlerExecutiveRegister = () => { toggleForm(); // 登录和注册表单之间切换 } }) - .catch(() => { - loading.value = false; - }) .finally(() => { loading.value = false; });