fix(projects): 修复登录的重定向地址

src/enum/storage.ts

@@ -1,6 +1,8 @@
 export enum EnumStorageKey {
   /** 用户token */
   'token' = '__TOKEN__',
+  /** 用户刷新token */
+  'refresh-koken' = '__REFRESH_TOKEN__',
   /** 用户信息 */
   'user-info' = '__USER_INFO__'
 }

src/hooks/common/index.ts

@@ -2,6 +2,7 @@ import useAppTitle from './useAppTitle';
 import useCreateContext from './useCreateContext';
 import useRouterChange from './useRouterChange';
 import useRouteParam from './useRouteParam';
+import useRouteQuery from './useRouteQuery';
 import useScrollBehavior from './useScrollBehavior';
 
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useScrollBehavior };
+export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useRouteQuery, useScrollBehavior };

src/hooks/common/useRouteParam.ts

@@ -1,20 +1,7 @@
-import { computed } from 'vue';
-import { useRoute } from 'vue-router';
-import { RouteNameMap } from '@/router';
+// import { computed } from 'vue';
+// import { useRoute } from 'vue-router';
+// import { RouteNameMap } from '@/router';
 
 export default function useRouteParam() {
-  const route = useRoute();
-
-  /** 登录跳转链接 */
-  const loginRedirectUrl = computed(() => {
-    let url = '';
-    if (route.name === RouteNameMap.get('login')) {
-      url = (route.params?.redirectUrl as string) ?? '';
-    }
-    return url;
-  });
-
-  return {
-    loginRedirectUrl
-  };
+  // const route = useRoute();
 }

src/hooks/common/useRouteQuery.ts

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

src/hooks/common/useRouterChange.ts

@@ -1,10 +1,24 @@
 import { useRouter } from 'vue-router';
-import { EnumRoutePath } from '@/enum';
-import { RouteNameMap } from '@/router';
+import { router as globalRouter, RouteNameMap } from '@/router';
 import type { LoginModuleType } from '@/interface';
 
-export default function useRouterChange() {
-  const router = useRouter();
+interface LoginRedirect {
+  /**
+   * 重定向类型
+   * - current: 取当前的地址作为重定向地址
+   * - custom: 自定义地址作为重定向地址
+   */
+  type: 'current' | 'custom';
+  /** 自定义地址 */
+  url: string;
+}
+
+/**
+ * 路由跳转
+ * @param inSetup - 是否在vue页面/组件的setup里面调用
+ */
+export default function useRouterChange(inSetup: boolean = true) {
+  const router = inSetup ? useRouter() : globalRouter;
 
   /** 跳转首页 */
   function toHome() {
@@ -14,35 +28,19 @@ export default function useRouterChange() {
   /**
    * 跳转登录页面(通过vue路由)
    * @param module - 展示的登录模块
-   * @param redirectUrl - 登录后重定向的页面路径
+   * @param redirect - 登录后重定向相关配置
    */
-  function toLogin(module: LoginModuleType = 'pwd-login', redirectUrl?: string) {
+  function toLogin(module: LoginModuleType = 'pwd-login', redirect: LoginRedirect = { type: 'current', url: '' }) {
+    const redirectUrl = redirect.type === 'current' ? window.location.href : redirect.url;
     router.push({
       name: RouteNameMap.get('login'),
-      params: {
-        module
-      },
-      query: {
-        redirectUrl
-      }
+      params: { module },
+      query: { redirectUrl }
     });
   }
-  /**
-   * 跳转登录页面(通过window.location)
-   * @param module - 展示的登录模块
-   * @param redirectUrl - 登录后重定向的页面路径
-   */
-  function toLoginByLocation(module: LoginModuleType = 'pwd-login', redirectUrl?: string) {
-    let href = `${window.location.origin + EnumRoutePath.login}/${module}`;
-    if (redirectUrl) {
-      href += redirectUrl;
-    }
-    window.location.href = href;
-  }
 
   return {
     toHome,
-    toLogin,
-    toLoginByLocation
+    toLogin
   };
 }

src/hooks/index.ts

@@ -1,2 +1,9 @@
-export { useAppTitle, useCreateContext, useRouterChange, useRouteParam, useScrollBehavior } from './common';
+export {
+  useAppTitle,
+  useCreateContext,
+  useRouterChange,
+  useRouteParam,
+  useRouteQuery,
+  useScrollBehavior
+} from './common';
 export { useCountDown, useSmsCode } from './business';

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

@@ -10,15 +10,12 @@
 <script lang="ts" setup>
 import { NDropdown, NAvatar } from 'naive-ui';
 import { UserAvatar, Logout } from '@vicons/carbon';
-import { dynamicIconRender } from '@/utils';
+import { dynamicIconRender, resetAuthStorage } from '@/utils';
 import HeaderItem from './HeaderItem.vue';
 import avatar from '@/assets/img/common/logo-fill.png';
-import { useAuthStore } from '@/store';
 
 type DropdownKey = 'user-center' | 'logout';
 
-const { resetAuthState } = useAuthStore();
-
 const options = [
   {
     label: '用户中心',
@@ -39,7 +36,8 @@ const options = [
 function handleDropdown(optionKey: string) {
   const key = optionKey as DropdownKey;
   if (key === 'logout') {
-    resetAuthState();
+    resetAuthStorage();
+    window.location.reload();
   }
 }
 </script>

src/router/index.ts

@@ -9,7 +9,7 @@ const routes: Array<RouteRecordRaw> = [...customRoutes, ...constantRoutes];
 /** 用于部署vercel托管服务 */
 const isVercel = import.meta.env.VITE_HTTP_ENV === 'VERCEL';
 
-const router = createRouter({
+export const router = createRouter({
   history: isVercel ? createWebHashHistory() : createWebHistory(),
   routes
 });

src/router/permission.ts

@@ -1,7 +1,7 @@
-import type { Router } from 'vue-router';
+import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { useTitle } from '@vueuse/core';
-import { getToken, getLoginRedirectUrl } from '@/utils';
-import { RouteNameMap, whitelistRoutes } from './routes';
+import { getToken } from '@/utils';
+import { RouteNameMap } from './routes';
 
 /**
  * 路由守卫函数
@@ -9,22 +9,10 @@ import { RouteNameMap, whitelistRoutes } from './routes';
  */
 export default function createRouterGuide(router: Router) {
   router.beforeEach((to, from, next) => {
+    // 开始 loadingBar
     window.$loadingBar?.start();
-    const token = getToken();
-    if (whitelistRoutes.includes(to.name as string)) {
-      if (to.name === RouteNameMap.get('login') && token) {
-        next('/');
-        return;
-      }
-      next();
-      return;
-    }
-    if (token) {
-      next();
-    } else {
-      const redirectUrl = getLoginRedirectUrl();
-      next({ name: RouteNameMap.get('login'), query: { redirectUrl } });
-    }
+    // 页面跳转逻辑
+    handleRouterAction(to, from, next);
   });
   router.afterEach(to => {
     // 设置document title
@@ -33,3 +21,45 @@ export default function createRouterGuide(router: Router) {
     window.$loadingBar?.finish();
   });
 }
+
+function handleRouterAction(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
+  const token = getToken();
+  const routerAction: [boolean, () => void][] = [
+    // 已登录状态跳转登录页，跳转至首页
+    [
+      to.name === RouteNameMap.get('login') && Boolean(token),
+      () => {
+        next({ name: RouteNameMap.get('root') });
+      }
+    ],
+    // 不需要权限的页面直接通行
+    [
+      !to.meta?.requiresAuth,
+      () => {
+        next();
+      }
+    ],
+    // 需要权限的页面
+    [
+      Boolean(to.meta?.requiresAuth),
+      () => {
+        if (token) {
+          // 有权限直接通行
+          next();
+        } else {
+          // 没有权限，跳转至登录页
+          const redirectUrl = window.location.href;
+          next({ name: RouteNameMap.get('login'), query: { redirectUrl } });
+        }
+      }
+    ]
+  ];
+
+  routerAction.some(item => {
+    const flag = item[0];
+    if (flag) {
+      item[1]();
+    }
+    return flag;
+  });
+}

src/router/routes.ts

@@ -109,6 +109,7 @@ export const customRoutes: CustomRoute[] = [
         path: EnumRoutePath['dashboard-analysis'],
         component: () => import('@/views/dashboard/analysis/index.vue'),
         meta: {
+          requiresAuth: true,
           title: EnumRouteTitle['dashboard-analysis']
         }
       },
@@ -117,6 +118,7 @@ export const customRoutes: CustomRoute[] = [
         path: EnumRoutePath['dashboard-workbench'],
         component: () => import('@/views/dashboard/workbench/index.vue'),
         meta: {
+          requiresAuth: true,
           title: EnumRouteTitle['dashboard-workbench']
         }
       }
@@ -127,6 +129,7 @@ export const customRoutes: CustomRoute[] = [
     path: EnumRoutePath.exception,
     component: BasicLayout,
     meta: {
+      requiresAuth: true,
       title: EnumRouteTitle.exception,
       icon: ExceptionOutlined
     },
@@ -136,6 +139,7 @@ export const customRoutes: CustomRoute[] = [
         path: EnumRoutePath['exception-403'],
         component: () => import('@/views/system/exception/403.vue'),
         meta: {
+          requiresAuth: true,
           title: EnumRouteTitle['exception-403'],
           fullPage: true
         }
@@ -145,6 +149,7 @@ export const customRoutes: CustomRoute[] = [
         path: EnumRoutePath['exception-404'],
         component: () => import('@/views/system/exception/404.vue'),
         meta: {
+          requiresAuth: true,
           title: EnumRouteTitle['exception-404'],
           fullPage: true
         }
@@ -154,6 +159,7 @@ export const customRoutes: CustomRoute[] = [
         path: EnumRoutePath['exception-500'],
         component: () => import('@/views/system/exception/500.vue'),
         meta: {
+          requiresAuth: true,
           title: EnumRouteTitle['exception-500'],
           fullPage: true
         }

src/store/modules/auth/index.ts

@@ -33,7 +33,7 @@ const authStore = defineStore({
     resetAuthState() {
       removeToken();
       this.$reset();
-      window.location.reload();
+      // window.location.reload();
     }
   }
 });

src/utils/auth/index.ts

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

src/utils/auth/location.ts

@@ -7,8 +7,3 @@ export function getLoginRedirectUrl() {
 export function toLoginRedirectUrl(redirectUrl: string) {
   window.location.href = redirectUrl;
 }
-
-/** 回到首页 */
-export function toHomeByLocation() {
-  window.location.href = '/';
-}

src/utils/auth/user.ts

@@ -3,21 +3,43 @@ import type { LoginModuleType } from '@/interface';
 import { setLocal, getLocal, removeLocal } from '../storage';
 
 /** 设置token */
-export function getToken() {
-  return getLocal<string>(EnumStorageKey.token) || '';
-}
-
-/** 获取token */
 export function setToken(token: string) {
   setLocal(EnumStorageKey.token, token);
 }
 
+/** 获取token */
+export function getToken() {
+  return getLocal<string>(EnumStorageKey.token) || '';
+}
+
+/** 去除token */
 export function removeToken() {
   removeLocal(EnumStorageKey.token);
 }
 
+/** 获取refresh token */
+export function getRefreshToken() {
+  return getLocal<string>(EnumStorageKey['refresh-koken']) || '';
+}
+
+/** 设置refresh token */
+export function setRefreshToken(token: string) {
+  setLocal(EnumStorageKey['refresh-koken'], token);
+}
+
+/** 去除refresh token */
+export function removeRefreshToken() {
+  removeLocal(EnumStorageKey['refresh-koken']);
+}
+
 export function getUserInfo() {}
 
+/** 去除用户相关缓存 */
+export function resetAuthStorage() {
+  removeToken();
+  removeRefreshToken();
+}
+
 /** 获取登录模块的正则字符串 */
 export function getLoginModuleRegExp() {
   const arr: LoginModuleType[] = ['pwd-login', 'code-login', 'register', 'reset-pwd', 'bind-wechat'];

src/utils/index.ts

@@ -3,10 +3,10 @@ export {
   getToken,
   removeToken,
   getUserInfo,
+  resetAuthStorage,
   getLoginModuleRegExp,
   getLoginRedirectUrl,
-  toLoginRedirectUrl,
-  toHomeByLocation
+  toLoginRedirectUrl
 } from './auth';
 
 export {
@@ -26,4 +26,13 @@ export {
   dynamicIconRender
 } from './common';
 
-export { setLocal, getLocal, setSession, getSession } from './storage';
+export {
+  setLocal,
+  getLocal,
+  removeLocal,
+  clearLocal,
+  setSession,
+  getSession,
+  removeSession,
+  clearSession
+} from './storage';

src/utils/storage/index.ts

@@ -1,2 +1,2 @@
-export { setLocal, getLocal, removeLocal } from './local';
-export { setSession, getSession } from './session';
+export { setLocal, getLocal, removeLocal, clearLocal } from './local';
+export { setSession, getSession, removeSession, clearSession } from './session';

src/utils/storage/local.ts

@@ -14,3 +14,7 @@ export function getLocal<T>(key: string) {
 export function removeLocal(key: string) {
   window.localStorage.removeItem(key);
 }
+
+export function clearLocal() {
+  window.localStorage.clear();
+}

src/utils/storage/session.ts

@@ -10,3 +10,11 @@ export function getSession<T>(key: string) {
   }
   return json;
 }
+
+export function removeSession(key: string) {
+  window.sessionStorage.removeItem(key);
+}
+
+export function clearSession() {
+  window.sessionStorage.clear();
+}

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

@@ -0,0 +1,3 @@
+import OtherLogin from './OtherLogin.vue';
+
+export { OtherLogin };

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

@@ -31,12 +31,12 @@ import { reactive, ref } from 'vue';
 import { NForm, NFormItem, NInput, NSpace, NCheckbox, NButton, useNotification } from 'naive-ui';
 import type { FormInst } from 'naive-ui';
 import { EnumLoginModule } from '@/enum';
-import { useRouterChange, useRouteParam } from '@/hooks';
+import { useRouterChange, useRouteQuery } from '@/hooks';
 import { setToken, toLoginRedirectUrl } from '@/utils';
-import { OtherLogin } from '../common';
+import { OtherLogin } from './components';
 
 const { toLogin, toHome } = useRouterChange();
-const { loginRedirectUrl } = useRouteParam();
+const { loginRedirectUrl } = useRouteQuery();
 const notification = useNotification();
 
 const formRef = ref<(HTMLElement & FormInst) | null>(null);

src/views/system/login/components/common/index.ts

@@ -1,3 +0,0 @@
-import OtherLogin from './OtherLogin/index.vue';
-
-export { OtherLogin };