refactor(projects): 登录模块由query变更为动态路由params

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;
   });

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里面调用！');
-    }
+    router.push({ name: routeName('login'), params: { module }, query: { ...query } });
   }
 
   /** 登录后跳转重定向的地址 */

src/layouts/common/GlobalHeader/components/UserAvatar.vue

@@ -46,7 +46,7 @@ function handleDropdown(optionKey: string) {
       negativeText: '取消',
       onPositiveClick: () => {
         resetAuthStorage();
-        toLogin('pwd-login', 'current');
+        toLogin();
       }
     });
   }

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 } });
       }
     ],
     // 登录状态进入需要登录权限的页面,直接通行

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
           };

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('|');
+}

src/views/component/button/index.vue

@@ -2,8 +2,8 @@
   <div>
     <n-card title="按钮" class="h-full shadow-sm rounded-16px">
       <n-grid cols="s:1 m:2" responsive="screen" :x-gap="16" :y-gap="16">
-        <n-grid-item v-for="item in buttonExample" :key="item.id" class="h-180px">
-          <n-card :title="item.label" class="h-full">
+        <n-grid-item v-for="item in buttonExample" :key="item.id">
+          <n-card :title="item.label" class="min-h-180px">
             <p v-if="item.desc" class="pb-16px">{{ item.desc }}</p>
             <n-space>
               <n-button

src/views/system/login/index.vue

@@ -9,10 +9,8 @@
           <n-gradient-text type="primary" :size="28">{{ title }}</n-gradient-text>
         </header>
         <main class="pt-24px">
-          <div v-for="item in modules" v-show="module === item.key" :key="item.key">
-            <h3 class="text-18px text-primary font-medium">{{ item.label }}</h3>
-            <component :is="item.component" />
-          </div>
+          <h3 class="text-18px text-primary font-medium">{{ activeModule.label }}</h3>
+          <component :is="activeModule.component" />
         </main>
       </div>
     </n-card>
@@ -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<Props>(), {
-  module: 'pwd-login'
-});
+const props = defineProps<Props>();
 
 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;