react+andDesign+vite+ts从零搭建后台管理系统(二)-reactRouter

router安装

react-router官网

npm i react-router-dom

文件创建

在项目目录下创建对应的router文件夹，创建对应的文件

modules文件

将所有菜单菜单以一级目录拆成多个文件，使用import.meta.glob将路由模块批量导入

• 单个文件的配置

import Layout from '@/layouts/index';
// 系统设置
import File from '@/views/system/File/index'
import Dict from '@/views/system/dict/index'
import DictItem from '@/views/system/dictItem'

const SystemSettingRouter = [
  {
    meta: { 
      title: '系统设置'
    },
    element: <Layout />,
    children: [
      {
        path: '/system/file',
        meta: {
          title: '文件管理',
          requiresAuth: true
        },
        element: <File />
      },
      {
        path: '/system/dict',
        meta: { 
          title: '数据字典',
          requiresAuth: true,
        },
        element: <Dict />
      },
      {
        path: '/system/dictItem',
        meta: { 
          title: '数字字典项',
          requiresAuth: true,
          hidden: true
        },
        element: <DictItem />
      }
    ]
  },
]

export default SystemSettingRouter

routes文件

import type { RouteObject } from '@/router/interface'
import Login from '@/views/Login/index'

// 导入所有router
const metaRouters = import.meta.glob('./modules/*.tsx', { eager: true })
// * 处理路由
export const routerArray: RouteObject[] = [];
Object.keys(metaRouters).forEach(item => {
  const moduleRoutes = metaRouters[item] as Record<string, any>;
	Object.keys(moduleRoutes).forEach((key: any) => {
    if (Array.isArray(moduleRoutes[key])) {
      routerArray.push(...moduleRoutes[key]);
    }
	});
});
export const routes: RouteObject[] = [
  {
    path: '/login',
    meta: { 
      requiresAuth: false,
      title: '登录',
    },
    element: <Login />
  },
  ...routerArray,
]

router入口文件 index.tsx

import { useRoutes, type RouteObject } from "react-router-dom";
import { routes } from './routes'
const Router = () => {
	const router = useRoutes(routes as RouteObject[]);
	return router;
};

export default Router

路由守卫

使用高阶组件(AuthRouter)进行对需要鉴权的路由进行包裹

import { useLocation, Navigate } from "react-router-dom";
import { searchRoute } from "@/utils";
import { getToken } from '@/utils/auth'
import { routes } from "@/router/routes";

const AuthRouter = (props) => {
  const { pathname } = useLocation();
	const route = searchRoute(pathname, routes);
  // * 判断当前路由是否需要访问权限(不需要权限直接放行)
	if (!route.meta?.requiresAuth) return props.children;  
  // 判断是否有token
  if (!getToken()) return <Navigate to="/login" replace />;
  
  return props.children
}

export default AuthRouter;

根目录文件 App.tsx

import Router from "@/router/index"
import AuthRouter from "@/router/utils/AuthRouter"
import { HashRouter } from "react-router-dom";
const App = () => {
  return (
     <HashRouter>
       <AuthRouter>
         <Router />
       </AuthRouter>
     </HashRouter>
  )
}