react_tutorial/react_router_guard

React Router 守卫（Guard）是 React Router 提供的一种机制，用于控制不同路由的访问权限。它可以帮助我们实现路由级别的权限控制，确保用户只能访问他们有权访问的页面。

基本概念

路由守卫：在 React Router 中，守卫是一种用于保护路由组件的机制，它允许你根据某些条件决定是否渲染该组件。
权限控制：通过守卫，我们可以根据用户的角色、权限等信息来控制路由的访问。

使用方法

组件内守卫：在路由组件内部使用 Redirect 组件来重定向到其他路由。
路由配置守卫：在路由配置中添加 beforeEnter 钩子函数，在该函数中进行权限判断。

示例

以下是一个简单的组件内守卫示例：

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    localStorage.getItem('token') ? (
      <Component {...props} />
    ) : (
      <Redirect to="/login" />
    )
  )} />
);

export default PrivateRoute;

在这个例子中，我们使用 localStorage 来存储用户的 token，如果用户没有 token，则重定向到登录页面。

扩展阅读

React Router 官方文档

希望这个教程能帮助你更好地理解 React Router 守卫。👍

React_Router_Guard