【react】工程项目中的通过自定义Hook进行路由设计以及路由鉴权

编码七号2025-03-19 8:11

新建router.js文件

javascript 复制代码

import { createBrowserRouter,Navigate } from 'react-router-dom';
import Layout from '../components/Layout';
import NoAuthPage from '../components/NoAuthPage';
import Index from '../pages/index';
import Login from '../pages/login';
import Table from '../pages/table';
 
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      // 添加默认重定向
      {
        path: '', // 空路径匹配根路径
        element: <Navigate to="/index" replace />, // 自动跳转到 /index
      },
      {
        path: 'index',
        element: <Index />,
      },
      {
        path: 'table',
        element: <Table/>,
      },
    ],
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: '/404',
    element: <NoAuthPage />,
  },
]);
 
export default router;

自定义hook,新建useAuth.js文件

javascript 复制代码

import { useNavigate, useLocation } from 'react-router-dom';
import { useEffect } from 'react';
 
// 模拟的鉴权函数
const isAuthenticated = () => {
    console.log('模拟的鉴权函数');
  // 这里可以替换为实际的鉴权逻辑，比如检查 token 或用户状态
  return localStorage.getItem('token') !== null;
};
 
// 自定义 Hook：useAuthRedirect
const useAuthRedirect = () => {
  const navigate = useNavigate();
  const location = useLocation();
 
  useEffect(() => {
    if (!isAuthenticated()) {
      // 如果当前路径是受保护的且用户未认证，则重定向到登录页面
      navigate('/login', { state: { from: location.pathname } });
    }
  }, [navigate, location]);
};
 
export default useAuthRedirect;

App.js文件

javascript 复制代码

import React from 'react'
import { RouterProvider } from 'react-router-dom';
import router from './router';


function App () {
    return <RouterProvider router={router}></RouterProvider>
}

export default App

Layout.jsx文件

javascript 复制代码

import React from 'react';
import { Layout } from 'antd';
import { Outlet } from 'react-router-dom';
import Menus from './Menu';
import useAuthRedirect from '../utils/useAuth';

const { Header, Content, Footer } = Layout;

const LayoutPage = () => {
  useAuthRedirect()
  return (
    <Layout>
      <Header>
        <Menus />
      </Header>
      <Content>
        <Outlet></Outlet>
      </Content>
      <Footer></Footer>
    </Layout>
  );
};
export default LayoutPage;