From 225c4fe0222d5de1955b26f9f2484506c95e9868 Mon Sep 17 00:00:00 2001 From: Soybean <2570172956@qq.com> Date: Mon, 29 Nov 2021 20:34:56 +0800 Subject: [PATCH] =?UTF-8?q?refactor(projects):=20=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E6=A8=A1=E5=9D=97=E7=94=B1query=E5=8F=98=E6=9B=B4=E4=B8=BA?= =?UTF-8?q?=E5=8A=A8=E6=80=81=E8=B7=AF=E7=94=B1params?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/composables/common/route.ts | 2 +- src/composables/common/router.ts | 31 +++++++++---------- .../GlobalHeader/components/UserAvatar.vue | 2 +- src/router/guard/permission.ts | 8 ++--- src/router/routes/constant-routes.ts | 5 +-- src/utils/router/helpers.ts | 8 ++++- src/views/component/button/index.vue | 4 +-- src/views/system/login/index.vue | 21 ++++++++----- 8 files changed, 45 insertions(+), 36 deletions(-) diff --git a/src/composables/common/route.ts b/src/composables/common/route.ts index 904d89c5a..57d204b90 100644 --- a/src/composables/common/route.ts +++ b/src/composables/common/route.ts @@ -36,7 +36,7 @@ export function useRouteQuery() { const loginRedirectUrl = computed(() => { let url: string | undefined; if (route.name === routeName('login')) { - url = (route.query?.redirectUrl as string) || ''; + url = (route.query?.redirect as string) || ''; } return url; }); diff --git a/src/composables/common/router.ts b/src/composables/common/router.ts index e3240d899..8d17852b1 100644 --- a/src/composables/common/router.ts +++ b/src/composables/common/router.ts @@ -1,6 +1,7 @@ +import { unref } from 'vue'; import { useRouter, useRoute } from 'vue-router'; import type { RouteLocationRaw } from 'vue-router'; -import { router as globalRouter, routePath } from '@/router'; +import { router as globalRouter, routeName } from '@/router'; import type { LoginModuleType } from '@/interface'; /** @@ -9,7 +10,7 @@ import type { LoginModuleType } from '@/interface'; */ export function useRouterPush(inSetup: boolean = true) { const router = inSetup ? useRouter() : globalRouter; - const route = inSetup ? useRoute() : null; + const route = inSetup ? useRoute() : unref(globalRouter.currentRoute); /** 跳转首页 */ function toHome() { @@ -24,35 +25,31 @@ export function useRouterPush(inSetup: boolean = true) { /** * 跳转登录页面(通过vue路由) * @param module - 展示的登录模块 - * @param redirectUrl - 重定向地址 + * @param redirect - 重定向地址(登录成功后跳转的地址) */ - function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl: LoginRedirect = 'current') { + function toLogin(module: LoginModuleType = 'pwd-login', redirect: LoginRedirect = 'current') { const routeLocation: RouteLocationRaw = { - path: routePath('login'), - query: { module } + name: routeName('login'), + params: { module } }; - if (redirectUrl) { - let url = redirectUrl; - if (redirectUrl === 'current') { + if (redirect) { + let url = redirect; + if (redirect === 'current') { url = router.currentRoute.value.fullPath; } - routeLocation.query!.redirectUrl = url; + Object.assign(routeLocation, { query: { redirect: url } }); } router.push(routeLocation); } /** - * 登陆页跳转登陆页 + * 登陆页跳转登陆页(登录模块切换) * @param module - 展示的登录模块 * @param query - 查询参数 */ function toCurrentLogin(module: LoginModuleType) { - if (route) { - const { query } = route; - router.push({ path: routePath('login'), query: { ...query, module } }); - } else { - throw Error('该函数必须在setup里面调用！'); - } + const { query } = route; + router.push({ name: routeName('login'), params: { module }, query: { ...query } }); } /** 登录后跳转重定向的地址 */ diff --git a/src/layouts/common/GlobalHeader/components/UserAvatar.vue b/src/layouts/common/GlobalHeader/components/UserAvatar.vue index 34625825b..c2f6c92ed 100644 --- a/src/layouts/common/GlobalHeader/components/UserAvatar.vue +++ b/src/layouts/common/GlobalHeader/components/UserAvatar.vue @@ -46,7 +46,7 @@ function handleDropdown(optionKey: string) { negativeText: '取消', onPositiveClick: () => { resetAuthStorage(); - toLogin('pwd-login', 'current'); + toLogin(); } }); } diff --git a/src/router/guard/permission.ts b/src/router/guard/permission.ts index 9f6a2ca2e..f78e68e84 100644 --- a/src/router/guard/permission.ts +++ b/src/router/guard/permission.ts @@ -1,6 +1,6 @@ import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router'; -import { router, routeName } from '@/router'; -import { getToken, getLoginRedirectUrl } from '@/utils'; +import { routeName } from '@/router'; +import { getToken } from '@/utils'; type RouterAction = [boolean, () => void]; @@ -33,8 +33,8 @@ export function handlePagePermission( [ !isLogin && needLogin, () => { - const redirectUrl = getLoginRedirectUrl(router); - next({ name: routeName('login'), query: { redirectUrl } }); + const redirect = to.fullPath; + next({ name: routeName('login'), query: { redirect } }); } ], // 登录状态进入需要登录权限的页面,直接通行 diff --git a/src/router/routes/constant-routes.ts b/src/router/routes/constant-routes.ts index 7f76f7b3e..c56f24cb1 100644 --- a/src/router/routes/constant-routes.ts +++ b/src/router/routes/constant-routes.ts @@ -2,6 +2,7 @@ import type { RouteRecordRaw } from 'vue-router'; import { BlankLayout } from '@/layouts'; import type { LoginModuleType } from '@/interface'; import { Login, NoPermission, NotFound, ServiceError } from '@/views'; +import { getLoginModuleRegExp } from '@/utils'; import { routeName, routePath, routeTitle } from '../constant'; import { ROUTE_HOME_NAME } from './route-home'; @@ -29,10 +30,10 @@ const constantRoutes: RouteRecordRaw[] = [ // 登录 { name: routeName('login'), - path: routePath('login'), + path: `${routePath('login')}/:module(${getLoginModuleRegExp()})?`, component: Login, props: route => { - const moduleType: LoginModuleType = (route.query?.module as LoginModuleType) || 'pwd-login'; + const moduleType = (route.params.module as LoginModuleType) || 'pwd-login'; return { module: moduleType }; diff --git a/src/utils/router/helpers.ts b/src/utils/router/helpers.ts index 7e73a8f59..06a4ef6e8 100644 --- a/src/utils/router/helpers.ts +++ b/src/utils/router/helpers.ts @@ -1,6 +1,6 @@ import type { Component } from 'vue'; import type { Router, RouteRecordRaw, RouteMeta } from 'vue-router'; -import type { ImportedRouteModules } from '@/interface'; +import type { ImportedRouteModules, LoginModuleType } from '@/interface'; interface SingleRouteConfig { /** 路由 */ @@ -107,3 +107,9 @@ export function getLoginRedirectUrl(router: Router) { const redirectUrl = path === '/' ? undefined : path; return redirectUrl; } + +/** 获取登录模块的正则字符串 */ +export function getLoginModuleRegExp() { + const modules: LoginModuleType[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat']; + return modules.join('|'); +} diff --git a/src/views/component/button/index.vue b/src/views/component/button/index.vue index 20ec07a71..72ea9dfd2 100644 --- a/src/views/component/button/index.vue +++ b/src/views/component/button/index.vue @@ -2,8 +2,8 @@
- - + +

{{ item.desc }}

{{ title }}
-
-

{{ item.label }}

- -
+

{{ activeModule.label }}

+
@@ -34,7 +32,7 @@ import { useThemeStore } from '@/store'; interface Props { /** 登录模块分类 */ - module?: LoginModuleType; + module: LoginModuleType; } interface LoginModule { @@ -43,9 +41,7 @@ interface LoginModule { component: Component; } -withDefaults(defineProps(), { - module: 'pwd-login' -}); +const props = defineProps(); const theme = useThemeStore(); const title = useAppTitle(); @@ -58,6 +54,15 @@ const modules: LoginModule[] = [ { key: 'bind-wechat', label: EnumLoginModule['bind-wechat'], component: BindWechat } ]; +const activeModule = computed(() => { + const active: LoginModule = { ...modules[0] }; + const findItem = modules.find(item => item.key === props.module); + if (findItem) { + Object.assign(active, findItem); + } + return active; +}); + const bgColor = computed(() => { const COLOR_WHITE = '#ffffff'; const ratio = theme.darkMode ? 0.6 : 0.3;