feat-路由拦截

src/App.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
   import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
   import { useAuthStore } from '@/state/modules/auth';
+  import { setupInterceptors } from '@/utils/interceptors';
 
   onLaunch(() => {
     console.log('App Launch');
+    setupInterceptors();
   });
   onShow(() => {
     const authStore = useAuthStore();

src/enums/routerEnum.ts

@@ -0,0 +1,12 @@
+export enum NAVIGATE_TYPE {
+  NAVIGATE_TO = 'navigateTo',
+  REDIRECT_TO = 'redirectTo',
+  RE_LAUNCH = 'reLaunch',
+  SWITCH_TAB = 'switchTab',
+}
+
+export const NAVIGATE_TYPE_LIST = ['navigateTo', 'redirectTo', 'reLaunch', 'switchTab'];
+
+export const HOME_PAGE = '/pages/index/index';
+export const LOGIN_PAGE = '/pages/login/index';
+export const NOT_FOUND_PAGE = '/pages/notFound/404';

src/main.ts

@@ -1,11 +1,8 @@
 import { createSSRApp } from 'vue';
 import App from './App.vue';
 import 'virtual:windi.css';
-import { setupInterceptors } from '@/utils/interceptors';
 import { setupStore } from '@/state';
 
-setupInterceptors();
-
 export function createApp() {
   const app = createSSRApp(App);
 

src/pages.json

@@ -12,6 +12,18 @@
       "style": {
         "navigationBarTitleText": "登录"
       }
+    },
+    {
+      "path": "pages/log/index",
+      "style": {
+        "navigationBarTitleText": "日志"
+      }
+    },
+    {
+      "path": "pages/notFound/404",
+      "style": {
+        "navigationBarTitleText": "Not Found"
+      }
     }
   ],
   "globalStyle": {

src/pages/index/index.vue

@@ -9,6 +9,12 @@
     <view>
       <button @tap="jumLogin">登录</button>
     </view>
+    <view url="pages/login/index?d=43" @tap="jumLogin1" hover-class="navigator-hover">
+      <button type="default">跳转到新页面</button>
+    </view>
+    <navigator url="/pages/log/index?d=43&title='日志'" hover-class="navigator-hover">
+      <button type="default">log</button>
+    </navigator>
   </view>
 </template>
 
@@ -20,8 +26,12 @@
     token: string;
   };
 
+  const jumLogin1 = () => {
+    uni.navigateTo({
+      url: '/pages/login1/index',
+    });
+  };
   const jumLogin = () => {
-    console.log('/pages/login/index');
     uni.navigateTo({
       url: '/pages/login/index',
     });

src/pages/log/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <view>log</view>
+</template>
+
+<script lang="ts" setup>
+  import { onLoad } from '@dcloudio/uni-app';
+  onLoad((query) => {
+    console.log('log onLOad', query);
+  });
+</script>
+
+<style lang="scss" scoped></style>

src/pages/login/index.vue

@@ -20,6 +20,13 @@
 <script setup lang="ts">
   import { reactive, ref } from 'vue';
   import { useAuthStore } from '@/state/modules/auth';
+  import { onLoad } from '@dcloudio/uni-app';
+  const redirect = ref<string | undefined>(undefined);
+  onLoad((query) => {
+    console.log('log onLOad', query);
+    redirect.value = query.redirect || undefined;
+  });
+
   const form = reactive({
     email: 'catch@admin.com',
     password: 'catchadmin',

src/pages/notFound/404.vue

@@ -0,0 +1,7 @@
+<template>
+  <view>404</view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/utils/http/index.ts

@@ -67,7 +67,7 @@ request.interceptors.response.use(
   },
   (response) => {
     // 请求错误做点什么。可以使用async await 做异步操作
-    error('Request Error!');
+    // error('Request Error!');
     return Promise.reject(response);
   },
 );

src/utils/interceptors/index.ts

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

src/utils/router/index.ts

@@ -0,0 +1,5 @@
+/**
+ * 需要验证登录的路径
+ * 包括分包(subPackage)的路径
+ */
+export const authRouter: string[] = ['pages/log/index'];

src/utils/router/interceptor.ts

@@ -0,0 +1,65 @@
+import { HOME_PAGE, LOGIN_PAGE, NAVIGATE_TYPE_LIST, NOT_FOUND_PAGE } from '@/enums/routerEnum';
+import { authRouter } from '@/utils/router/index';
+import { useAuthStore } from '@/state/modules/auth';
+import { Toast } from '@/utils/uniApi';
+
+/**
+ * 判断当前路径是否在需要验证登录的路径中
+ * @param path
+ * @return boolean
+ */
+function isIncludesAuthRouter(path: string): boolean {
+  if (!authRouter.length) return false;
+  return authRouter.includes(path) || authRouter.some((item) => path.includes(item));
+}
+
+// 跳转登录
+function jumpLogin(path: string) {
+  const _path = path.startsWith('/') ? path : `/${path}`;
+  let pathQuery = encodeURIComponent(_path);
+  uni.navigateTo({
+    url: `${LOGIN_PAGE}?redirect=${pathQuery}`,
+  });
+}
+
+/**
+ * 添加拦截器
+ * 微信小程序端uni.switchTab拦截无效,请在onShow处理
+ * 微信小程序端 <navigator>拦截无效,请使用api
+ * @param routerName
+ * @export void
+ */
+function addInterceptor(routerName: string) {
+  uni.addInterceptor(routerName, {
+    // 跳转前拦截
+    invoke: (args) => {
+      if (isIncludesAuthRouter(args.url) && args.url !== LOGIN_PAGE) {
+        const authStore = useAuthStore();
+        if (authStore.isLogin) return args;
+        jumpLogin(args.url);
+        return false;
+      }
+      return args;
+    },
+    // 成功回调拦截
+    success: (res: any) => {},
+    // 失败回调拦截
+    fail: (err: any) => {
+      if (err.errMsg.includes(`${routerName}:fail page`)) {
+        Toast('页面不存在');
+        uni.navigateTo({
+          url: `${NOT_FOUND_PAGE}?redirect=${HOME_PAGE}`,
+        });
+      }
+      return false;
+    },
+    // 完成回调拦截
+    complete: (res: any) => {},
+  });
+}
+
+export function routerInterceptor() {
+  NAVIGATE_TYPE_LIST.forEach((item) => {
+    addInterceptor(item);
+  });
+}

src/utils/router/router.d.ts

@@ -0,0 +1,10 @@
+declare interface Router extends Record<string, any> {
+  path: string;
+  meta?: {
+    auth?: boolean;
+  };
+}
+
+declare interface TabBar extends Record<string, any> {
+  list: Router[];
+}