使用react写一个路由鉴权及使用

React 是一个非常流行的前端框架，可以使用 React Router 来实现路由功能。在 React 中实现路由鉴权的基本思路是：在路由跳转时检查用户是否有访问权限，如果没有，则跳转到登录界面或其他未授权的提示页面。下面是一个简单的路由鉴权实现示例。

首先，安装 React Router：

npm install react-router-dom

然后，在需要进行路由鉴权的组件中，引入 React Router 组件，并定义需要进行鉴权的路由：

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

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

const App = () => (
  <Router>
    <div>
      <Route exact path='/' component={Home} />
      <PrivateRoute path='/dashboard' component={Dashboard} authed={fakeAuth.isAuthenticated} />
      <Route path='/login' component={Login} />
    </div>
  </Router>
);

在上面的代码中，PrivateRoute 是一个自定义的组件，用于进行路由鉴权。如果用户已经登录，则渲染传入的组件（如 Dashboard），否则跳转到登录页面。

需要注意的是，fakeAuth.isAuthenticated 是一个用于判断用户是否已经登录的变量，可以根据具体需求进行修改。

最后，使用 PrivateRoute 组件来定义需要进行路由鉴权的路由，如上面的 /dashboard 路由。其他的路由则可以正常定义，如 / 和 /login。

这样，当用户访问需要进行路由鉴权的路由时，就会进行鉴权操作，如果未授权，则会跳转到登录页面。