wip: router

src/App.vue

@@ -1,13 +1,16 @@
 <script setup lang="ts">
   import { onLaunch, onShow, onHide } from '@dcloudio/uni-app';
   import { useAuthStore } from '@/state/modules/auth';
-  import { setupInterceptors } from '@/utils/interceptors';
-  import { useAppStore } from '@/state/modules/app';
+  import { removeInterceptor, setupInterceptors } from '@/utils/interceptors';
+  import { useRouterStore } from '@/state/modules/router';
 
   onLaunch(() => {
     console.log('App Launch');
+
+    removeInterceptor();
+
     setupInterceptors();
-    const appStore = useAppStore();
+    const appStore = useRouterStore();
     appStore.initialize();
   });
   onShow(() => {

src/components/AppProvider/inedx.vue

@@ -1,12 +1,4 @@
-<script lang="ts" setup name="AppProvider">
-  import { useAppStore } from '@/state/modules/app';
-
-  const appStore = useAppStore();
-  console.log('getPages', appStore.getPages);
-  // eslint-disable-next-line no-undef
-  let currentPages = getCurrentPages();
-  console.log('currentPages', currentPages);
-</script>
+<script lang="ts" setup name="AppProvider"></script>
 <template>
   <view>
     <slot></slot>

src/hooks/router.ts

@@ -0,0 +1,11 @@
+import { Navigates } from '@/utils/router/navigates';
+
+const navigates = new Navigates();
+
+export function useRouter() {
+  return navigates;
+}
+
+export function useRoute() {
+  const currentPages = getCurrentPages();
+}

src/pages.json

@@ -26,6 +26,9 @@
       "path": "pages/login/index",
       "style": {
         "navigationBarTitleText": "登录"
+      },
+      "meta": {
+        "ignoreAuth": true
       }
     },
     {
@@ -38,6 +41,9 @@
       "path": "pages/notFound/404",
       "style": {
         "navigationBarTitleText": "Not Found"
+      },
+      "meta": {
+        "ignoreAuth": true
       }
     }
   ],

src/pages/index/index.vue

@@ -4,8 +4,9 @@
   import { ref } from 'vue';
   import { router } from '@/utils/router';
   const title = ref('uni-app vue3 ts --Vite');
+  console.log('感受到考虑到垮落法');
   const handleGetStarted = () => {
-    router.pushTab('/pages/demo/index');
+    router.pushTab('/pages/demo/index?d=str');
   };
 </script>
 <template>

src/state/modules/app.ts

@@ -1,35 +0,0 @@
-import { defineStore } from 'pinia';
-import { Pages } from '@/types/pages';
-import { pagesMap } from '@/utils/router/pages';
-
-interface AppStore {
-  pages: Map<string, Pages> | undefined;
-  currentPage: Pages | undefined;
-}
-
-export const useAppStore = defineStore({
-  id: 'app',
-  state: (): AppStore => ({
-    pages: undefined,
-    currentPage: undefined,
-  }),
-  getters: {
-    getPages(state) {
-      return state.pages;
-    },
-    getCurrentPage(state) {
-      return state.currentPage;
-    },
-  },
-  actions: {
-    initialize() {
-      this.setPages();
-    },
-    setPages() {
-      this.pages = pagesMap;
-    },
-    setCurrentPage(path: string) {
-      this.currentPage = this.pages?.get(path);
-    },
-  },
-});

src/state/modules/auth.ts

@@ -45,6 +45,7 @@ export const useAuthStore = defineStore({
      * @description 登出
      */
     async loginOut(): Promise<any> {
+      console.log('~~loginOut请求');
       try {
         const res = await logout();
         removeCache(TOKEN_KEY);

src/state/modules/router.ts

@@ -0,0 +1,35 @@
+import { defineStore } from 'pinia';
+import { Pages } from '@/types/pages';
+import { pagesMap } from '@/utils/router/pages';
+
+interface routeStore {
+  routes: Map<string, Pages> | undefined;
+  currentRouter: Pages | undefined;
+}
+
+export const useRouterStore = defineStore({
+  id: 'routerStore',
+  state: (): routeStore => ({
+    routes: undefined,
+    currentRouter: undefined,
+  }),
+  getters: {
+    getRoutes(state) {
+      return state.routes;
+    },
+    getCurrentRoute(state) {
+      return state.currentRouter;
+    },
+  },
+  actions: {
+    initialize() {
+      this.setRoutes();
+    },
+    setRoutes() {
+      this.routes = pagesMap;
+    },
+    setCurrentRoute(path: string) {
+      this.currentRouter = this.routes?.get(path) || undefined;
+    },
+  },
+});

src/utils/interceptors/index.ts

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

src/utils/router/constant.ts

@@ -0,0 +1,12 @@
+import { router } from '@/utils/router/index';
+import { LOGIN_PAGE } from '@/enums/routerEnum';
+
+/**
+ * 跳转登录
+ * @param path
+ */
+export function jumpLogin(path: string) {
+  const _path = path.startsWith('/') ? path : `/${path}`;
+  const pathQuery = encodeURIComponent(_path);
+  router.push(`${LOGIN_PAGE}?redirect=${pathQuery}`);
+}

src/utils/router/interceptor.ts

@@ -1,25 +1,22 @@
 import { HOME_PAGE, LOGIN_PAGE, NAVIGATE_TYPE_LIST, NOT_FOUND_PAGE } from '@/enums/routerEnum';
 import { AUTH_PAGE, router } from '@/utils/router/index';
 import { useAuthStore } from '@/state/modules/auth';
+import { jumpLogin } from '@/utils/router/constant';
+import { useRouterStore } from '@/state/modules/router';
 
 /**
- * 判断当前路径是否在需要验证登录的路径中
+ * 忽略验证
  * @param path
  * @return boolean
  */
-export function isIncludesAuthRouter(path: string): boolean {
-  if (!AUTH_PAGE.length) return false;
-  return AUTH_PAGE.includes(path) || AUTH_PAGE.some((item) => path.includes(item));
-}
-
-/**
- * 跳转登录
- * @param path
- */
-export function jumpLogin(path: string) {
-  const _path = path.startsWith('/') ? path : `/${path}`;
-  const pathQuery = encodeURIComponent(_path);
-  router.push(`${LOGIN_PAGE}?redirect=${pathQuery}`);
+export function ignoreAuth(path: string): boolean {
+  console.log('忽略验证', path);
+  const _path = path.startsWith('/') ? path.slice(1) : path;
+  const routerStore = useRouterStore();
+  const routes = routerStore.getRoutes;
+  if (!routes) return false;
+  const route = routes.get(_path);
+  return !!route?.meta?.ignoreAuth;
 }
 
 /**
@@ -34,16 +31,21 @@ 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;
+      console.log(args, ignoreAuth(args.url));
+      if (ignoreAuth(args.url)) return args;
+      const authStore = useAuthStore();
+      if (authStore.isLogin) return args;
+      // jumpLogin(args.url);
+      return false;
     },
     // 成功回调拦截
-    success: () => {},
+    success: (args) => {
+      // console.log('回调', args);
+      // const currentPages = getCurrentPages();
+      // console.log('currentPages', currentPages);
+      // const currentRoute = currentPages[currentPages.length - 1];
+      // console.log('currentRoute', currentRoute);
+    },
     // 失败回调拦截
     fail: (err: any) => {
       let reg: RegExp;
@@ -66,8 +68,20 @@ function addInterceptor(routerName: string) {
   });
 }
 
+/**
+ * 添加路由拦截器
+ */
 export function routerInterceptor() {
   NAVIGATE_TYPE_LIST.forEach((item) => {
     addInterceptor(item);
   });
 }
+
+/**
+ * 移除路由拦截器
+ */
+export function routerRemoveInterceptor() {
+  NAVIGATE_TYPE_LIST.forEach((item) => {
+    uni.removeInterceptor(item);
+  });
+}

vite.config.ts

@@ -44,11 +44,11 @@ export default ({ mode }: ConfigEnv): UserConfig => {
     },
     plugins: [
       uni(),
-      eslintPlugin({
-        include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
-        exclude: ['./node_modules/**'],
-        cache: false,
-      }),
+      // eslintPlugin({
+      //   include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
+      //   exclude: ['./node_modules/**'],
+      //   cache: false,
+      // }),
     ],
     css: {
       preprocessorOptions: {