路由过滤器

1、react18.3 路由过滤器

• 3-1、修改router 增加meta信息，增加过滤器组件BeforeEach

    import { lazy } from 'react'
    import React from 'react'
    import { createBrowserRouter } from 'react-router-dom'
    import type{ RouteObject } from 'react-router-dom'
    
    const Home = lazy(() => import('../views/Home'))
    const About = lazy(() => import('../views/About'))
    const Login = lazy(() => import('../views/Login'))
    const BeforeEach = lazy(() => import('./BeforeEach'))
    declare module 'react-router' {
        interface IndexRouteObject {
            meta?: {
                auth?: boolean
            }
        }
        interface NonIndexRouteObject {
            meta?: {
                auth?: boolean
            }
        }
    }
    export const routers: RouteObject[] = [
        {
            path: '/',
            element: React.createElement(BeforeEach, null, React.createElement(Home)),
            meta: {
                auth: true
            }
        },
        {
            path: '/about',
            element: React.createElement(BeforeEach, null, React.createElement(About)),
            meta: {
                auth: false
            }
        },
        {
            path: '/login',
            element: React.createElement(BeforeEach, null, React.createElement(Login)),
            meta: {
                auth: true
            }
        }
    ]
    const router = createBrowserRouter(
        routers
    )
    export default router

• 3-2、BeforeEach

    import React from 'react'
   import { useLocation, matchRoutes, Navigate } from 'react-router-dom'
   import { routers } from './router'
   interface BeforeEachProps {
   children?: React.ReactNode
   }
   
   export default function BeforeEach(props: BeforeEachProps) {
   const location = useLocation()
   // 获取路由及meta信息
   const matchs = matchRoutes(routers, location)
   if (Array.isArray(matchs)) {
   const meta = matchs[matchs.length - 1].route.meta
   // 需要权限
   console.log(meta)
   if (!meta?.auth) {
   return <Navigate to='/login' />
   }
   }
   return (
   <>{ props.children }</>
   )
   }

2、小程序 路由过滤器

• 在page生命周期的onShow里直接判断

3、vue3.5 路由过滤器

• 使用router.beforeEach方法，在路由跳转前执行
• login和/无需权限，about需要权限
• 没有token则跳转到login

 import { createWebHashHistory, createRouter, RouteRecordRaw } from 'vue-router'
 
 import HomeView from '@/views/HomeView.vue'
 import AboutView from '@/views/AboutView.vue'
 import LoginView from '@/views/LoginView.vue'
 
 // 定义meta类型
 declare module 'vue-router' {
     interface RouteMeta {
         auth?:boolean
     }
 }
 
 const routes:Array<RouteRecordRaw> = [
     { path: '/', name: 'home', component: HomeView },
     { path: '/login', name: 'login', component: LoginView },
     { path: '/about', name: 'about', component: AboutView, meta: { auth: true }}
 ]
 
 const router = createRouter({
     /*
       无路径(createMemoryHistory)
       正常路径(createWebHistory)
       hash带#路径(createWebHashHistory)
      */
     history: createWebHashHistory(),
     routes
 })
 
 router.beforeEach((to, from, next) => {
     const token = '22'
     // 需要权限的页面
     if (to.meta.auth === true) {
         if (token) {
             next()
         } else {
             next('/login')
         }
     } else { // 不需要权限的页面
         // 有token，再登录login直接跳转到home
         if (token && to.path === '/login') {
             next('/')
         } else {
             next()
         }
     }
 })
 export default router