feat: login dialog (#37)

* chore: login-dialog demo

* Merge branch 'main' into login-dialog

* chore: update dialog

* Merge branch 'main' into login-dialog

* chore: accept login params

* chore: redirect to login or show login dialog

apps/web-antd/src/layouts/basic.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
-import type { NotificationItem } from '@vben/layouts';
-
-import { computed, ref } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 import { useRouter } from 'vue-router';
 
 import { LOGIN_PATH } from '@vben/constants';
 import { IcRoundCreditScore, MdiDriveDocument, MdiGithub } from '@vben/icons';
-import { BasicLayout, Notification, UserDropdown } from '@vben/layouts';
+import {
+  BasicLayout,
+  LoginDialog,
+  Notification,
+  NotificationItem,
+  UserDropdown,
+} from '@vben/layouts';
 import { openWindow } from '@vben/utils';
 import { preferences } from '@vben-core/preferences';
 
@@ -80,7 +84,8 @@ const menus = computed(() => [
 ]);
 
 const appStore = useAppStore();
-const { userInfo } = useAccessStore();
+const accessStore = useAccessStore();
+const { showLoginDialog, userInfo } = toRefs(accessStore);
 const router = useRouter();
 
 async function handleLogout() {
@@ -118,5 +123,13 @@ function handleMakeAll() {
         @make-all="handleMakeAll"
       />
     </template>
+    <template #dialog>
+      <LoginDialog
+        :open="showLoginDialog"
+        password-placeholder="123456"
+        username-placeholder="vben"
+        @login="accessStore.authLogin"
+      />
+    </template>
   </BasicLayout>
 </template>

apps/web-antd/src/router/guard.ts

@@ -92,10 +92,25 @@ function setupAccessGuard(router: Router) {
 
     // 生成路由表
     // 当前登录用户拥有的角色标识列表
-    const userInfo =
-      accessStore.userInfo || (await accessStore.fetchUserInfo());
-
-    const userRoles = userInfo.roles ?? [];
+    let userRoles: string[] = [];
+    try {
+      const userInfo =
+        accessStore.userInfo || (await accessStore.fetchUserInfo());
+      userRoles = userInfo.roles ?? [];
+    } catch (error: any) {
+      if (error.status === 409) {
+        accessStore.setShowLoginDialog(true);
+      } else if (error.status === 401) {
+        accessStore.reset();
+        return {
+          path: LOGIN_PATH,
+          // 如不需要，直接删除 query
+          query: { redirect: encodeURIComponent(to.fullPath) },
+          // 携带当前跳转的页面，登录后重新跳转该页面
+          replace: true,
+        };
+      }
+    }
 
     // 生成菜单和路由
     const { accessibleMenus, accessibleRoutes } = await generateAccess({

apps/web-antd/src/store/modules/access.ts

@@ -17,6 +17,11 @@ export const useAccessStore = defineStore('access', () => {
   const router = useRouter();
   const loading = ref(false);
 
+  const showLoginDialog = ref(false);
+  function setShowLoginDialog(value: boolean) {
+    showLoginDialog.value = value;
+  }
+
   const accessToken = computed(() => coreStoreAccess.accessToken);
   const userRoles = computed(() => coreStoreAccess.userRoles);
   const userInfo = computed(() => coreStoreAccess.userInfo);
@@ -65,6 +70,7 @@ export const useAccessStore = defineStore('access', () => {
         coreStoreAccess.setUserInfo(userInfo);
         coreStoreAccess.setAccessCodes(accessCodes);
 
+        showLoginDialog.value = false;
         onSuccess
           ? await onSuccess?.()
           : await router.push(userInfo.homePath || DEFAULT_HOME_PATH);
@@ -99,6 +105,8 @@ export const useAccessStore = defineStore('access', () => {
     reset,
     setAccessMenus,
     setAccessRoutes,
+    setShowLoginDialog,
+    showLoginDialog,
     userInfo,
     userRoles,
   };