refactor(projects): 登录重定向地址相关重构

src/hooks/common/useRouteQuery.ts

@@ -1,5 +1,6 @@
 import { computed } from 'vue';
 import { useRoute } from 'vue-router';
+import { EnumRoutePath } from '@/enum';
 import { RouteNameMap } from '@/router';
 
 export default function useRouteQuery() {
@@ -7,9 +8,9 @@ export default function useRouteQuery() {
 
   /** 登录跳转链接 */
   const loginRedirectUrl = computed(() => {
-    let url = '';
+    let url: EnumRoutePath | undefined;
     if (route.name === RouteNameMap.get('login')) {
-      url = (route.query?.redirectUrl as string) ?? '';
+      url = (route.query?.redirectUrl as EnumRoutePath) || '';
     }
     return url;
   });

src/hooks/common/useRouterChange.ts

@@ -4,16 +4,11 @@ import { EnumRoutePath } from '@/enum';
 import { router as globalRouter, RouteNameMap } from '@/router';
 import type { LoginModuleType } from '@/interface';
 
-interface LoginRedirect {
-  /**
-   * 重定向类型
-   * - current: 取当前的地址作为重定向地址
-   * - custom: 自定义地址作为重定向地址
-   */
-  type: 'current' | 'custom' | 'no';
-  /** 自定义地址 */
-  url: string;
-}
+/**
+ * 重定向地址
+ * - current: 取当前的path作为重定向地址
+ */
+type LoginRedirect = 'current' | EnumRoutePath;
 
 /**
  * 路由跳转
@@ -31,21 +26,19 @@ export default function useRouterChange(inSetup: boolean = true) {
   /**
    * 跳转登录页面(通过vue路由)
    * @param module - 展示的登录模块
-   * @param addRedirect - 是否添加重定向地址
-   * @param redirect - 登录后重定向相关配置
+   * @param redirectUrl - 重定向地址
    */
-  function toLogin(
-    module: LoginModuleType = 'pwd-login',
-    addRedirect: boolean = false,
-    redirect: LoginRedirect = { type: 'current', url: '' }
-  ) {
-    const redirectUrl = redirect.type === 'current' ? window.location.href : redirect.url;
+  function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl?: LoginRedirect) {
     const routeLocation: RouteLocationRaw = {
       name: RouteNameMap.get('login'),
       params: { module }
     };
-    if (addRedirect) {
-      routeLocation.query = { redirectUrl };
+    if (redirectUrl) {
+      let url = redirectUrl;
+      if (redirectUrl === 'current') {
+        url = router.currentRoute.value.fullPath as EnumRoutePath;
+      }
+      routeLocation.query = { redirectUrl: url };
     }
     router.push(routeLocation);
   }
@@ -62,14 +55,15 @@ export default function useRouterChange(inSetup: boolean = true) {
     }
   }
 
-  function toReload(redirectUrl: string) {
-    router.push({ path: EnumRoutePath.reload, query: { redirectUrl } });
+  /** 登录后跳转重定向的地址 */
+  function toLoginRedirectUrl(path: EnumRoutePath) {
+    router.push(path);
   }
 
   return {
     toHome,
     toLogin,
     toCurrentLogin,
-    toReload
+    toLoginRedirectUrl
   };
 }

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

@@ -13,9 +13,11 @@ import { UserAvatar, Logout } from '@vicons/carbon';
 import { dynamicIconRender, resetAuthStorage } from '@/utils';
 import { HoverContainer } from '@/components';
 import avatar from '@/assets/svg/avatar/avatar01.svg';
+import { useRouterChange } from '@/hooks';
 
 type DropdownKey = 'user-center' | 'logout';
 
+const { toLogin } = useRouterChange();
 const dialog = useDialog();
 
 const options = [
@@ -45,7 +47,7 @@ function handleDropdown(optionKey: string) {
       negativeText: '取消',
       onPositiveClick: () => {
         resetAuthStorage();
-        window.location.reload();
+        toLogin('pwd-login', 'current');
       }
     });
   }

src/layouts/BasicLayout/components/GlobalSider/components/DefaultSider/index.vue

@@ -6,6 +6,7 @@
     :collapsed="app.menu.collapsed"
     :collapsed-width="theme.menuStyle.collapsedWidth"
     :width="menuWidth"
+    show-trigger="bar"
     @collapse="handleMenuCollapse(true)"
     @expand="handleMenuCollapse(false)"
   >

src/router/permission/index.ts

@@ -1,6 +1,6 @@
 import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { useTitle } from '@vueuse/core';
-import { getToken } from '@/utils';
+import { getToken, getLoginRedirectUrl } from '@/utils';
 import { RouteNameMap } from '../helpers';
 
 /**
@@ -46,7 +46,7 @@ function handleRouterAction(to: RouteLocationNormalized, from: RouteLocationNorm
     [
       !isLogin && needLogin,
       () => {
-        const redirectUrl = window.location.href;
+        const redirectUrl = getLoginRedirectUrl();
         next({ name: RouteNameMap.get('login'), query: { redirectUrl } });
       }
     ],

src/utils/auth/index.ts

@@ -1,2 +1 @@
 export { getToken, setToken, removeToken, getUserInfo, resetAuthStorage, getLoginModuleRegExp } from './user';
-export { getLoginRedirectUrl, toLoginRedirectUrl } from './location';

src/utils/auth/location.ts

@@ -1,9 +0,0 @@
-/** 获取登录重定向的地址 */
-export function getLoginRedirectUrl() {
-  return window.location.href;
-}
-
-/** 登录后跳转重定向的地址 */
-export function toLoginRedirectUrl(redirectUrl: string) {
-  window.location.href = redirectUrl;
-}

src/utils/index.ts

@@ -1,13 +1,4 @@
-export {
-  setToken,
-  getToken,
-  removeToken,
-  getUserInfo,
-  resetAuthStorage,
-  getLoginModuleRegExp,
-  getLoginRedirectUrl,
-  toLoginRedirectUrl
-} from './auth';
+export { setToken, getToken, removeToken, getUserInfo, resetAuthStorage, getLoginModuleRegExp } from './auth';
 
 export {
   isNumber,
@@ -39,4 +30,4 @@ export {
   clearSession
 } from './storage';
 
-export { getRouteNameMap, setRouterCacheName } from './router';
+export { getRouteNameMap, setRouterCacheName, getLoginRedirectUrl } from './router';

src/utils/router/index.ts

@@ -1,6 +1,7 @@
 import type { Component } from 'vue';
 import { EnumRoutePath } from '@/enum';
 import type { RoutePathKey } from '@/interface';
+import { router } from '@/router';
 
 /** 获取路由name map */
 export function getRouteNameMap() {
@@ -13,3 +14,9 @@ export function setRouterCacheName(component: Component, name?: string) {
     Object.assign(component, { name });
   }
 }
+
+export function getLoginRedirectUrl() {
+  const path = router.currentRoute.value.fullPath as EnumRoutePath;
+  const redirectUrl = path === EnumRoutePath.root ? undefined : path;
+  return redirectUrl;
+}

src/views/dashboard/workbench/index.vue

@@ -41,6 +41,9 @@
             <n-radio :default-checked="true" />
           </n-space>
         </div>
+        <n-space>
+          <n-button type="primary" @click="handleDialog">Dialog</n-button>
+        </n-space>
       </n-space>
     </n-spin>
   </div>
@@ -48,12 +51,23 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio } from 'naive-ui';
+import { NGradientText, NSpace, NButton, NSpin, NTag, NSwitch, NCheckbox, NRadio, useDialog } from 'naive-ui';
+
+const dialog = useDialog();
 
 const loading = ref(true);
 
 setTimeout(() => {
   loading.value = false;
 }, 1500);
+
+function handleDialog() {
+  dialog.info({
+    title: '提示',
+    content: '您确定要退出登录吗？',
+    positiveText: '确定',
+    negativeText: '取消'
+  });
+}
 </script>
 <style scoped></style>

src/views/system/login/components/PwdLogin/index.vue

@@ -40,12 +40,12 @@ import type { FormInst, FormRules } from 'naive-ui';
 import { EnumLoginModule } from '@/enum';
 import { useThemeStore } from '@/store';
 import { useRouterChange, useRouteQuery } from '@/hooks';
-import { setToken, toLoginRedirectUrl } from '@/utils';
+import { setToken } from '@/utils';
 import { OtherLogin } from './components';
 import logo from '@/assets/img/common/logo.png';
 
 const theme = useThemeStore();
-const { toHome, toCurrentLogin } = useRouterChange();
+const { toHome, toCurrentLogin, toLoginRedirectUrl } = useRouterChange();
 const { loginRedirectUrl } = useRouteQuery();
 const notification = useNotification();