feat(auth): 添加用户认证模块与登录页面

src/plugins/00.router-plugin.ts

@@ -2,8 +2,8 @@ import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders';
 import { setupLayouts } from 'virtual:meta-layouts';
 // import { createGetRoutes, setupLayouts } from 'virtual:generated-layouts';
 import { createRouter, createWebHistory } from 'vue-router';
-import type { RouteNamedMap } from 'vue-router/auto-routes';
-import { routes, handleHotUpdate } from 'vue-router/auto-routes';
+import type { Router } from 'vue-router';
+import { handleHotUpdate, routes } from 'vue-router/auto-routes';
 
 const setupLayoutsResult = setupLayouts(routes);
 const router = createRouter({
@@ -15,6 +15,10 @@ const router = createRouter({
   strict: true,
 });
 
+router.isReady().then(() => {
+  console.debug('✅ [router is ready]');
+});
+
 router.onError((error) => {
   console.debug('🚨 [router error]:', error);
 });
@@ -33,49 +37,24 @@ export function install({ app }: { app: import('vue').App<Element> }) {
   // 警告：路由守卫的创建顺序会影响执行流程，请勿调整
   createNProgressGuard(router);
   if (import.meta.env.VITE_APP_ENABLE_ROUTER_LOG_GUARD === 'true') createLogGuard(router);
-  Object.assign(globalThis, { stack: createStackGuard(router) });
+  Object.assign(window, { stack: createStackGuard(router) });
+
+  // >>>
+  Object.values(
+    import.meta.glob<{
+      createGuard?: (router: Router) => void;
+    }>('./router-guard/*.ts', { eager: true /* true 为同步，false 为异步 */ }),
+  ).forEach((module) => {
+    module.createGuard?.(router);
+  });
+  // <<<
 }
 
-declare module 'vue-router' {
-  /* definePage({ meta: { title: '示例演示' } }); */
-  interface RouteMeta {
-    /**
-     * @description 是否在菜单中隐藏
-     */
-    hideInMenu?: boolean;
+if (__DEV__) Object.assign(window, { router });
 
-    /**
-     * @description 菜单标题 //!⚠️通过多语言标题方案（搜`PageTitleLocalizations`）维护标题
-     */
-    title?: string;
-
-    /**
-     * @description 使用的布局，设置为 false 则表示不使用布局
-     */
-    layout?: string | false;
-
-    /**
-     * @description 菜单项是否渲染为可点击链接，默认为 true
-     * - true: 使用 RouterLink 包装，可点击跳转
-     * - false: 仅渲染纯文本标签，不可点击（适用于分组标题）
-     */
-    link?: boolean;
-
-    /**
-     * @description 菜单排序权重，数值越小越靠前，未设置则按路径字母顺序排序
-     */
-    order?: number;
-  }
-}
-
-export { router, setupLayoutsResult };
-
-declare global {
-  type PageTitleLocalizations = Record<keyof RouteNamedMap, string>;
-}
-
-if (__DEV__) Object.assign(globalThis, { router });
 // This will update routes at runtime without reloading the page
 if (import.meta.hot) {
   handleHotUpdate(router);
 }
+
+export { router, setupLayoutsResult };

src/plugins/00.router-plugin.types.ts

@@ -0,0 +1,42 @@
+import type { RouteNamedMap } from 'vue-router/auto-routes';
+
+declare global {
+  type PageTitleLocalizations = Record<keyof RouteNamedMap, string>;
+}
+
+declare module 'vue-router' {
+  /* definePage({ meta: { title: '示例演示' } }); */
+  interface RouteMeta {
+    /**
+     * @description 是否在菜单中隐藏
+     */
+    hideInMenu?: boolean;
+
+    /**
+     * @description 菜单标题 //!⚠️通过多语言标题方案（搜`PageTitleLocalizations`）维护标题
+     */
+    title?: string;
+
+    /**
+     * @description 使用的布局，设置为 false 则表示不使用布局
+     */
+    layout?: string | false;
+
+    /**
+     * @description 菜单项是否渲染为可点击链接，默认为 true
+     * - true: 使用 RouterLink 包装，可点击跳转
+     * - false: 仅渲染纯文本标签，不可点击（适用于分组标题）
+     */
+    link?: boolean;
+
+    /**
+     * @description 菜单排序权重，数值越小越靠前，未设置则按路径字母顺序排序
+     */
+    order?: number;
+
+    /**
+     * @description 是否忽略权限，默认为 false
+     */
+    ignoreAuth?: boolean;
+  }
+}

src/plugins/index.ts

@@ -5,12 +5,15 @@ type UserPlugin = (ctx: UserPluginContext) => void;
 type AutoInstallModule = { [K: string]: unknown; install?: UserPlugin };
 type UserPluginContext = { app: import('vue').App<Element> };
 
-const autoInstallModules: AutoInstallModule = import.meta.glob('./!(index).ts', {
-  eager: true /* true 为同步，false 为异步 */,
-});
+const autoInstallModules: AutoInstallModule = import.meta.glob(
+  ['./*.ts', '!./**/*.types.ts', '!./index.ts'],
+  {
+    eager: true /* true 为同步，false 为异步 */,
+  },
+);
 
 export function setupPlugins(app: import('vue').App) {
-  console.group('🔌 Plugins');
+  console.group(`🔌 Installing ${Object.keys(autoInstallModules).length} plugins`);
   for (const path in autoInstallModules) {
     const module = autoInstallModules[path] as AutoInstallModule;
     if (module.install) {

src/plugins/router-guard/router-permission-guard.ts

@@ -0,0 +1,28 @@
+import type { Router } from 'vue-router';
+
+export function createGuard(router: Router) {
+  router.beforeEach(async (to /* , from */) => {
+    const userStore = useAuthStore();
+
+    if (to.name === 'Login') {
+      userStore.clearToken('User navigated to login page');
+    }
+
+    if (to.meta.ignoreAuth) {
+      return true;
+    }
+
+    if (!userStore.isLoggedIn) {
+      console.debug('🔑 [permission-guard] 用户未登录，重定向到登录页');
+      return { name: 'Login' };
+    }
+  });
+
+  router.beforeResolve(async (/* to, from */) => {
+    const userStore = useAuthStore();
+    if (userStore.isLoggedIn && !userStore.userInfo) {
+      console.debug('🔑 [permission-guard] 用户信息不存在，尝试获取用户信息');
+      await userStore.fetchUserInfo();
+    }
+  });
+}