React 中的私有路由、公共路由和受限路由
本文将介绍如何实现私有路由、公共路由和受限路由。我将使用React Router，但其他路由库的思路也类似。
我们以以下组件为例：
家：或者一条每个人都能到达的类似公共路线。
登录：是一个受限路由，这意味着它应该只对未经身份验证的用户开放，因为如果经过身份验证的用户可以访问登录/注册页面，那就没什么意义了。
仪表盘：是一个私有路由，只有经过身份验证的用户才能访问。
在开始编写代码之前，让我们先考虑以下几个抽象概念：
isAuthenticated这可以告诉我们用户是否已通过身份验证。
ROUTES可以是一个枚举，用于访问我们的路由。
enum ROUTES {
HOME = '/',
LOGIN = '/login'
DASHBOARD = '/dashboard'
}
私人路线
这里的想法是，如果用户已通过身份验证，则渲染我们的组件；如果用户未通过身份验证，则将用户重定向到登录页面。
import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { ROUTES } from '../constants';
import { isAuthenticated } from '../auth.utils';
function PrivateRoute(props: RouteProps): React.ReactElement {
const { component: Component, ...rest } = props;
const render = props => {
if (!isAuthenticated) {
return <Redirect to={ROUTES.LOGIN} />;
}
return <Component {...props} />;
};
return <Route {...rest} render={render} />;
}
export default PrivateRoute;
公共路线和限制路线
该Route组件默认react-router是公开的，但我们可以在此基础上进行修改，使其受到限制。
我们可以添加一个restricted默认值为的属性false，并使用该条件：如果用户已通过身份验证且路由受限，则将用户重定向回Dashboard组件。
import React from 'react';
import { Route, Redirect, RouteProps } from 'react-router-dom';
import { ROUTES } from '../constants';
import { isAuthenticated } from '../auth.utils';
interface PublicRouteProps {
restricted?: boolean;
}
function PublicRoute(props: PublicRouteProps & RouteProps): React.ReactElement {
const { component: Component, restricted = false, ...rest } = props;
const render = props => {
if (isAuthenticated && restricted) {
return <Redirect to={ROUTES.DASHBOARD} />;
}
return <Component {...props} />;
};
return <Route {...rest} render={render} />;
}
export default PublicRoute;
把它们组合起来
最后，让我们在组件中声明所有路由App.tsx，看看现在的路由配置如何。
import React from 'react';
import { BrowserRouter, Switch } from 'react-router-dom';
import { ROUTES } from './constants';
import { Home, Dashboard, Login } from './pages';
import { PrivateRoute, PublicRoute } from './components';
function App(): React.ReactElement {
return (
<BrowserRouter>
<Switch>
<PublicRoute component={Home} path={ROUTES.HOME} exact />
<PublicRoute restricted component={Login} path={ROUTES.LOGIN} exact />
<PrivateRoute component={Dashboard} path={ROUTES.DASHBOARD} exact />
</Switch>
</BrowserRouter>
);
}
export default App;
希望这能让您更深入地了解如何组织私密且受保护的路由。如果您遇到任何问题，
欢迎随时在 Twitter 上联系我(@karan_6864) 。
编程愉快🎉
文章来源：https://dev.to/karanpratapsingh/private-public-and-restricted-routes-in-react-42ff