feat: 门户拦截定向跳转

.env

@@ -19,7 +19,7 @@ VITE_MENU_ICON=mdi:menu
 VITE_HTTP_PROXY=Y
 
 # vue-router mode: hash | history | memory
-VITE_ROUTER_HISTORY_MODE=history
+VITE_ROUTER_HISTORY_MODE=hash
 
 # success code of backend service, when the code is received, the request is successful
 VITE_SERVICE_SUCCESS_CODE=200

src/hooks/common/router.ts

@@ -38,6 +38,9 @@ export function useRouterPush(inSetup = true) {
       routeLocation.params = params;
     }
 
+    if (key === 'login') {
+      sessionStg.remove('wanfiRedirectParams');
+    }
     return routerPush(routeLocation);
   }
 

src/router/guard/route.ts

@@ -9,6 +9,7 @@ import type { RouteKey } from '@elegant-router/types';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouteStore } from '@/store/modules/route';
 import { localStg } from '@/utils/storage';
+import { getQueryParams } from "@/utils/common";
 
 /**
  * create route guard
@@ -17,10 +18,9 @@ import { localStg } from '@/utils/storage';
  */
 export function createRouteGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
-    const location = await checkRoute(to);
-
-    if (location) {
-      next(location);
+    const routeLocation = await checkRoute(to);
+    if (routeLocation) {
+      next(routeLocation);
       return;
     }
 
@@ -35,7 +35,7 @@ export function createRouteGuard(router: Router) {
     const routeRoles = to.meta.roles || [];
 
     const hasRole = authStore.userInfo.roles?.some(role => routeRoles.includes(role));
-    const hasAuth = !routeRoles.length || hasRole
+    const hasAuth = !routeRoles.length || hasRole;
 
     const routeSwitches: CommonType.StrategicPattern[] = [
       // if it is login route when logged in, then switch to the root page
@@ -96,6 +96,9 @@ async function checkRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
   const notFoundRoute: RouteKey = 'not-found';
   const isNotFoundRoute = to.name === notFoundRoute;
 
+  // 门户检查
+  checkRedirectParams();
+
   // if the constant route is not initialized, then initialize the constant route
   if (!routeStore.isInitConstantRoute) {
     await routeStore.initConstantRoute();
@@ -185,6 +188,73 @@ async function checkRoute(to: RouteLocationNormalized): Promise<RouteLocationRaw
   return null;
 }
 
+/**
+ * 检查门户重定向参数
+ */
+function checkRedirectParams(){
+  // console.log('checkRoute to', to)
+  // console.log('checkRoute location', location)
+  if (import.meta.env.VITE_ROUTER_HISTORY_MODE === 'hash') {
+    const queryParams = getQueryParams(window.location.search);
+    if (['site', 'clientMac'].every(s => Object.keys(queryParams).includes(s))) {
+      sessionStg.set<any>('wanfiRedirectParams', queryParams);
+    }
+  } else if (import.meta.env.VITE_ROUTER_HISTORY_MODE === 'history') {
+    let search = window.location.search;
+    const index = search.indexOf("?", 2);
+    if (index !== -1) {
+      search = search.slice(index);
+    }
+    const queryParams = getQueryParams(decodeURIComponent(search));
+    if (['site', 'clientMac'].every(s => Object.keys(queryParams).includes(s))) {
+      sessionStg.set<any>('wanfiRedirectParams', queryParams);
+    }
+  }
+  // 没有重定向参数强制从新获取
+  const wanfiRedirectParams = sessionStg.get('wanfiRedirectParams');
+  if (wanfiRedirectParams) {
+    if (!['site', 'clientMac'].every(s => Object.keys(wanfiRedirectParams).includes(s))) {
+      localStg.remove('token');
+      sessionStg.remove('wanfiRedirectParams');
+      reLoadLocationHref();
+    }
+  } else {
+    reLoadLocationHref();
+  }
+}
+
+/**
+ * 重定向地址
+ */
+function reLoadLocationHref(){
+  if(import.meta.env.DEV){
+    const paramsObject = {
+      clientMac: "C2-83-E5-D2-17-C3",
+      clientIp: "192.168.2.51",
+      t: "1733370350",
+      site: "67333c27f6161a69b3e42efe",
+      redirectUrl: "http%3A%2F%2F192.168.9.59%2Flocal-u%2F%23%2Fhome",
+      apMac: "B0-19-21-7E-27-40",
+      ssidName: "TP-Link_OMC_Local",
+      radioId: "0"
+    };
+
+    // 获取当前页面的 URL
+    const currentUrl = window.location.origin;
+    // 使用 URLSearchParams 将对象转换为查询字符串
+    const searchParams = new URLSearchParams(paramsObject);
+    // 检查当前 URL 是否已经包含查询参数
+    const newUrl = currentUrl.includes('?')
+      ? `${currentUrl}&${searchParams.toString()}`
+      : `${currentUrl}?${searchParams.toString()}`;
+
+    // 跳转到新的 URL
+    window.location.href = newUrl;
+    return
+  }
+  window.location.href = `//8.8.8.8`;
+}
+
 function handleRouteSwitch(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
   // route with href
   if (to.meta.href) {

src/typings/api.d.ts

@@ -136,6 +136,7 @@ declare namespace Api {
       code: string;
       uuid: string;
       authType: string;
+      wanfiRedirectParams: any;
     }
     interface RegisterBody{
       username: string;

src/typings/auto-imports.d.ts

@@ -114,6 +114,7 @@ declare global {
   const getFixedTabIds: typeof import('../store/modules/tab/shared')['getFixedTabIds']
   const getFixedTabs: typeof import('../store/modules/tab/shared')['getFixedTabs']
   const getGlobalMenusByAuthRoutes: typeof import('../store/modules/route/shared')['getGlobalMenusByAuthRoutes']
+  const getQueryParams: typeof import('../utils/common')['getQueryParams']
   const getRouteIcons: typeof import('../store/modules/tab/shared')['getRouteIcons']
   const getSelectedMenuKeyPathByKey: typeof import('../store/modules/route/shared')['getSelectedMenuKeyPathByKey']
   const getServiceBaseURL: typeof import('../utils/service')['getServiceBaseURL']

src/typings/storage.d.ts

@@ -3,6 +3,8 @@ declare namespace StorageType {
   interface Session {
     /** The theme color */
     themeColor: string;
+    /** Redirect Params */
+    wanfiRedirectParams: string;
     // /**
     //  * the theme settings
     //  */

src/utils/common.ts

@@ -1,4 +1,4 @@
-import { $t } from '@/locales';
+import {$t} from '@/locales';
 
 /**
  * Transform record to option
@@ -36,3 +36,17 @@ export function translateOptions(options: CommonType.Option<string>[]) {
     label: $t(option.label as App.I18n.I18nKey)
   }));
 }
+
+/**
+ * 解析地址栏参数?s=1
+ *
+ * @param obj s
+ */
+export function getQueryParams(search = window.location.search) {
+  const params = new URLSearchParams(search);
+  const obj: any = {};
+  params.forEach((value, key) => {
+    obj[key] = value;
+  });
+  return obj;
+}

src/views/_builtin/login/modules/pwd-login.vue

@@ -4,7 +4,7 @@ import { loginModuleRecord } from '@/constants/app';
 import { useRouterPush } from '@/hooks/common/router';
 import { useAntdForm, useFormRules } from '@/hooks/common/form';
 import { useAuthStore } from '@/store/modules/auth';
-import {useI18n} from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
 // Add interface for check code response
 interface CheckCodeResponse {
@@ -16,6 +16,7 @@ interface CheckCodeResponse {
 defineOptions({
   name: 'PwdLogin'
 });
+
 const { t } = useI18n();
 const authStore = useAuthStore();
 const { toggleLoginModule } = useRouterPush();
@@ -23,7 +24,6 @@ const { formRef, validate } = useAntdForm();
 const { patternRules } = useFormRules();
 const codeImg = ref('');
 
-
 getCheckCode();
 
 const model = reactive({
@@ -31,7 +31,8 @@ const model = reactive({
   password: '123456',
   code: '',
   uuid: '',
-  authType: 'u'
+  authType: 'u',
+  wanfiRedirectParams: {}
 });
 
 const rules = {
@@ -41,8 +42,9 @@ const rules = {
 
 async function handleSubmit() {
   await validate();//验证表单内容
+  model.wanfiRedirectParams = sessionStg.get('wanfiRedirectParams');
   await authStore.login({
-    loginForm: model,//发送表单的数据
+    loginForm: model, //发送表单的数据
     onError() {
       getCheckCode();//重新获取验证码
     }