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

新建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;
相关推荐
万少8 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL13 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl0229 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang30 分钟前
前端如何实现电子签名
前端·javascript·html5
海天胜景32 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼33 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿35 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再37 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55542 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录1 小时前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css