react 路由 authority属性

React Router提供了一个名为`Route`的组件，用于在应用程序中定义路由规则。`Route`组件有一个`render`属性，可以让你在匹配到某个路由时渲染对应的组件。另外，`Route`组件也支持`component`属性来指定要渲染的组件。

React Router还提供了一个`<Redirect>`组件，可以用于在路由匹配失败时进行重定向。

在React Router中，在`<Route>`组件中，我们可以使用`<Route>`的`render`属性或者`component`属性来指定要渲染的组件。但是有时候，我们希望对某些路由进行权限控制，只有在用户具有特定的权限时才能访问该路由。这时候，我们可以使用`<Route>`的`render`属性，将权限控制逻辑封装在一个函数中，并将该函数作为`render`属性的值传递给`<Route>`组件。

例如，下面的代码演示了如何实现一个基于用户权限控制的路由：

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

const PrivateRoute = ({ component: Component, authority, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      authority ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

上述代码中，我们定义了一个名为`PrivateRoute`的组件，该组件接受三个属性：

- `component`: 要渲染的组件
- `authority`: 用户权限
- `rest`: 其他属性

`PrivateRoute`组件内部使用`<Route>`组件来定义路由规则，其中`render`属性的值是一个函数。当路由匹配到该组件时，该函数会被调用，并根据用户权限决定是否渲染`<Component>`组件或者重定向到登录页面。

例如，我们可以在路由配置中使用`PrivateRoute`组件来限制用户访问某些页面，如下所示：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import PrivateRoute from './PrivateRoute';
import LoginPage from './LoginPage';
import HomePage from './HomePage';

const App = () => (
  <Router>
    <div>
      <Route path="/login" component={LoginPage} />
      <PrivateRoute path="/home" component={HomePage} authority={true} />
    </div>
  </Router>
);

export default App;

上述代码中，我们使用`<PrivateRoute>`组件来定义了一个需要登录后才能访问的路由规则，只有当用户具有权限时才能访问该路由。如果用户没有登录，则会被重定向到登录页面。