React Router 路由守卫
组件内路由守卫
1、下面是使用高阶组件实现路由守卫的示例代码：
import React from 'react';
import { Route, Redirect } from 'react-router-dom';const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (<Route{...rest}render={(props) =>isAuthenticated ? (<Component {...props} />) : (<Redirect to={{ pathname: '/login', state: { from: props.location } }} />)}/>
);export default PrivateRoute;
在上面的代码中，PrivateRoute 是一个高阶组件，它接收一个组件作为参数，并返回一个新的组件。在 render 方法中，如果用户已经登录，则渲染传入的组件；否则，重定向到登录页面。通过使用该高阶组件，我们可以在需要进行权限验证的路由上使用 PrivateRoute 来保护路由，例如：
<Switch><PrivateRoute exact path="/" component={Home} isAuthenticated={isAuthenticated} /><PrivateRoute path="/dashboard" component={Dashboard} isAuthenticated={isAuthenticated} /><Route path="/login" component={Login} />
</Switch>
其中 isAuthenticated 是一个布尔值，表示当前用户是否已经登录。
2、使用 函数组件或 render 属性来实现路由守卫
React Router 可以使用 Route 组件的 render 属性或函数式组件来实现路由守卫。
使用 render 属性时，可以传入一个函数，根据需要来渲染不同的组件或页面。在这个函数中可以实现路由守卫的逻辑，例如检查用户是否登录，根据用户角色判断是否有权限访问该页面等。如果不满足条件，可以返回一个重定向或提示信息，否则可以渲染目标组件或页面。
示例代码：
import { Route, Redirect } from 'react-router-dom';function PrivateRoute({ component: Component, isAuth, ...rest }) {return (<Route{...rest}render={(props) =>isAuth ? (<Component {...props} />) : (<Redirectto={{pathname: '/login',state: { from: props.location },}}/>)}/>);
}
在上面的示例中，PrivateRoute 组件接受三个参数：component，代表需要渲染的目标组件；isAuth，代表用户是否已登录；rest，代表其他参数，例如路由路径等。在 render 函数中，如果用户已登录，就渲染目标组件，否则返回一个重定向到登录页面。
使用函数式组件时，可以将需要实现路由守卫的逻辑直接写在函数组件中，例如在 useEffect 钩子函数中进行判断。如果不满足条件，可以使用 history.push 方法进行重定向。
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';function PrivatePage() {const history = useHistory();const isAuth = true;useEffect(() => {if (!isAuth) {history.push('/login');}}, [isAuth, history]);return <div>Private Page</div>;
}
在上面的示例中，如果用户未登录，就会使用 history.push 方法将页面重定向到登录页面。这里的 useEffect 钩子函数会在组件渲染完成后执行，也可以根据需要添加其他依赖项。
全局路由守卫
虽然React没有路由守卫，但是我们可以通过高阶组件实现相关功能，使用方法如下
- 创建 AuthRoute.tsx 文件（位置可根据自己的习惯存放）
import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
const allowList = ['/login', '/register'];
const loginRoute = '/login';
const indexRoute = '/'
export default function AuthRoute(props) {const location = useLocation();// children 为子组件const { children } = props;// 根据 token 对路由进行权限校验，需要和后端配合使用// 这里的 token 一般是登陆成功之后拿到后端返回的 token 并通过 Cookie.set('token', token字符串， {// expires: time_limit // 设置存放时间// })设置let token = false;if (token && token !== 'undefined') {// 有 token 的状态下禁止用户回到登录页，重定向到首页if (location.pathname === loginRoute) {return <Navigate to={indexRoute}></Navigate>;} else {// 其他路由均可正常跳转return <>{children}</>;}} else {// 无 token 的状态下，如果要跳转的路由是白名单中的路由，正常跳转if (allowList.includes(location.pathname || '')) {return <>{children}</>;} else {// 无 token 且非白名单路由，重定向至登录页return <Navigate to={loginRoute}></Navigate>;}}
}//https://zhuanlan.zhihu.com/p/628935247 React Router 组件路由守卫（Route Guard）的机制
- 在 App.tsx中引入并设置
import React from 'react';
import ReactDOM from 'react-dom/client';
import './styles/basic.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import ThemeContext from './store/themeContext';
import store from './store';
import AuthRoute from './auth/auth';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><BrowserRouter><ThemeContext.Providervalue={{store}}><AuthRoute><App /></AuthRoute></ThemeContext.Provider></BrowserRouter></React.StrictMode>
);// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
)
