perf: 优化登录体验

src/components/Navbar/index.vue

@@ -3,11 +3,11 @@
  * 头部导航栏
  * @description 所有尺寸都用px2rpx做适配
  */
-import { useSystem } from '@/hooks/useSystem';
+import { useSystem } from '@/hooks/app/useSystem';
 import { px2rpx } from '@/utils/uniapi';
 import { computed, ref } from 'vue';
 import { useRoute, useRouter } from 'uni-mini-router';
-import { useGlobalStyle } from '@/hooks/useGlobalStyle';
+import { useGlobalStyle } from '@/hooks/app/useGlobalStyle';
 import Iconify from '@/components/Iconify/index.vue';
 import { HOME_PAGE } from '@/enums/routerEnum';
 

src/pages/about/index.vue

@@ -33,7 +33,7 @@ const handleLoginOut = () => {
                 </view>
                 <view class="desc">{{ isLogin ? '测试' : '未登入' }}</view>
             </view>
-            <view class="cell"><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log')">log</BasicButton></view>
+            <view class="cell"><BasicButton @click="handleJump('/pages/log/index?id=4345&title=log&word=困的顾客老师')">log</BasicButton></view>
             <view class="cell" v-if="isLogin"><BasicButton @click="handleLoginOut">登出</BasicButton></view>
             <view class="cell" v-else>
                 <BasicButton @click="handleJump('/pages/login/index')"> 登入 </BasicButton>

src/pages/log/index.vue

@@ -1,13 +1,13 @@
-<template>
-    <view style="line-height: 88rpx; text-align: center">登录后访问log</view>
-</template>
-
 <script lang="ts" setup>
 import { onLoad } from '@dcloudio/uni-app';
 
 onLoad((query) => {
-    console.log('log onLoad', query);
+    console.log('log onLoad query', query);
 });
 </script>
 
+<template>
+    <view style="line-height: 88rpx; text-align: center">登录后访问log</view>
+</template>
+
 <style lang="scss" scoped></style>

src/pages/login/index.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { reactive, ref } from 'vue';
+import { reactive, ref, unref } from 'vue';
 import { onLoad } from '@dcloudio/uni-app';
 import { useAuthStore } from '@/state/modules/auth';
 import { Toast } from '@/utils/uniapi/prompt';
 import { useRouter } from 'uni-mini-router';
 import { useRequest } from 'alova';
 import { login } from '@/services/api/auth';
+import { omit } from 'lodash-es';
 
-const redirect = ref<string | undefined>(undefined);
+const pageQuery = ref<Record<string, any> | undefined>(undefined);
 onLoad((query) => {
-    redirect.value = query.redirect ? decodeURIComponent(query.redirect) : undefined;
+    pageQuery.value = query;
 });
 
 const router = useRouter();
@@ -25,11 +26,13 @@ const submit = (e: any) => {
         Toast('登录成功', { duration: 1500 });
         authStore.setToken(res.token);
         setTimeout(() => {
-            // if (redirect.value) {
-            //     router.push(redirect.value!, { replace: true });
-            //     return;
-            // }
+            if (unref(pageQuery)?.redirect) {
+                // 如果有存在redirect(重定向)参数，登录成功后直接跳转
+                router.replace({ name: unref(pageQuery).redirect, params: omit(unref(pageQuery), ['redirect']) });
+            } else {
+                // 不存在则回到首页
                 router.replaceAll({ name: 'Home' });
+            }
         }, 1500);
     });
 };

src/router/guard.ts

@@ -15,7 +15,8 @@ function createBeforeEachGuard(router: Router) {
             next();
         } else if (!authStore.isLogin && to && to.name !== 'Login') {
             // 如果没有登录且目标路由不是登录页面则跳转到登录页面
-            next({ name: 'Login' });
+            // 将目标路由和参数传入登录页面，登录成功后直接跳转到目标路由，优化体验
+            next({ name: 'Login',params:{redirect: to.name, ...to.query} });
         } else if (authStore.isLogin && to && to.name === 'Login') {
             // 如果已经登录且目标页面是登录页面则跳转至首页
             next({ name: 'Home' });

src/utils/interceptors/index.ts

@@ -1,9 +1,8 @@
-import { routerInterceptor, routerRemoveInterceptor } from '@/utils/router/interceptor';
 
 export function setupInterceptors() {
-    routerInterceptor();
+
 }
 
 export function removeInterceptor() {
-    routerRemoveInterceptor();
+
 }

src/utils/uniapi/index.ts

@@ -44,7 +44,7 @@ export const rpx2px = (upx: number) => {
 
 /**
  * px 换算为 rpx
- * @param upx
+ * @param px
  */
 export const px2rpx = (px: number) => {
     return px / (uni.upx2px(100) / 100);