react 权限配置,例子

好的，下面是一个基于React Router的权限控制示例，假设我们有一个需要登录才能访问的Dashboard页面：

首先，在App.js中定义路由：

import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
      </Switch>
    </Router>
  );
}

其中，PrivateRoute是我们自定义的一个组件，用于检查用户是否登录，如果未登录则重定向到登录页面：

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

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

function isAuthenticated() {
  // 判断用户是否已登录，这里只是一个示例
  return localStorage.getItem('token') !== null;
}

这样，在访问Dashboard页面时，就会自动检查用户是否登录，如果未登录则重定向到登录页面。如果已登录，则显示Dashboard页面。

通过这种方式，我们可以在React应用程序中实现基本的权限控制。当然，具体的实现方式会因应用场景和需求而有所不同。