React 导航守卫

最新推荐文章于 2025-01-12 19:02:05 发布

ajdhakj6

最新推荐文章于 2025-01-12 19:02:05 发布

阅读量200

点赞数

CC 4.0 BY-SA版权

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/ajdhakj6/article/details/128454819

本文介绍如何使用React Router实现带有权限验证的路由跳转。通过自定义的RequireAuth组件拦截未授权用户的访问，并引导其至登录页。文章展示了具体的代码实现方式，包括如何利用localStorage检查用户身份。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由拦截

在实际项目开发过程中，路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定，故需要导航守卫来完成这一事项
我把路由配置写在了App.jsx中，也可以写在其他组件中。
上代码：

// App.jsx中

// import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { HashRouter, Route, Routes } from 'react-router-dom'
import { Navigate } from 'react-router'
import Home from './views/Home'//首页
import Login from './views/Login'//登录
import Register from './views/Register'//注册

export default function App() {
    // RequireAuth 组件相当于一个拦截器
   function RequireAuth({children}){
    // userid是用户ID,三元表达式判断：当他存在时，随意跳转，不存在时拦截跳转到登录界面
      const userid =localStorage.getItem('Register_userid')
return userid?(children):(<Navigate to='/Login' replace  />)
    }
  return (
    // 在用BrowserRouter时，有些页面跳转出现白屏，我改成了HashRouter，没有了白屏问题
    <HashRouter>
    {/* <BrowserRouter> */}
      <Routes>
      <Route path='/' element={<RequireAuth><Home></Home></RequireAuth>}></Route>  
        <Route path='/login' element={<Login></Login>}></Route>
        <Route path='/register' element={<Register></Register>}></Route>
      </Routes>
    {/*  </BrowserRouter> */}
       </HashRouter>
  );
} 
     
//  <RequireAuth>  //拦截组件
// <Home></Home> //被拦截组件（首页）
//  </RequireAuth>