正文

掌握React Router 4.0：轻松实现路由守卫与权限控制

/0 浏览量
0622

在构建单页面应用（SPA）时，React Router 是一个不可或缺的工具。它允许我们为应用的不同部分定义路由，并轻松地导航到这些部分。React Router 4.0 引入了许多新特性，其中包括路由守卫和权限控制。本文将深入探讨如何使用 React Router 4.0 实现路由守卫与权限控制。

路由守卫

路由守卫是一种机制，它允许我们在用户访问特定路由之前执行一些操作。这通常用于检查用户是否已经登录，或者是否有权限访问某个页面。

使用 Route 组件

React Router 提供了 Route 组件，它允许我们定义路由和渲染对应的组件。我们可以使用 Route 组件的 render 属性来添加路由守卫。

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

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

const App = () => (
  <div>
    <PrivateRoute path="/protected" component={ProtectedPage} />
  </div>
);

在上面的代码中，我们创建了一个 PrivateRoute 组件，它检查 localStorage 中是否有 isLoggedIn 的标记。如果有，则渲染 ProtectedPage 组件；如果没有，则重定向到登录页面。

使用 withRouter 高阶组件

withRouter 是一个高阶组件，它允许我们将路由信息传递给组件。我们可以使用它来创建一个路由守卫，它依赖于组件的状态。

import React from 'react';
import { withRouter } from 'react-router-dom';

class PrivateRoute extends React.Component {
  render() {
    const { component: Component, ...rest } = this.props;

    return (
      <Route {...rest} render={props => (
        this.props.isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login' }} />
        )
      )} />
    );
  }
}

export default withRouter(PrivateRoute);

在这个例子中，我们使用 withRouter 来获取 isLoggedIn 状态，并将其用于路由守卫。

权限控制

权限控制是确保用户只能访问他们有权访问的页面的机制。在 React Router 中，我们可以使用高阶组件来创建权限控制。

使用高阶组件

我们可以创建一个高阶组件（HOC），它接受一个组件并检查用户的权限。

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

const requireAuth = (WrappedComponent) => {
  return (props) => {
    const { user } = this.props;
    if (!user || !user.isAuthenticated) {
      return <Redirect to={{ pathname: '/login' }} />;
    }
    return <WrappedComponent {...props} />;
  };
};

const ProtectedPage = requireAuth((props) => (
  <div>
    <h1>Protected Page</h1>
  </div>
));

在上面的代码中，我们创建了一个 requireAuth HOC，它检查 user 对象的 isAuthenticated 属性。如果用户未认证，则重定向到登录页面。

使用角色检查

在某些情况下，我们可能需要根据用户的角色来控制访问权限。我们可以扩展 requireAuth HOC 来实现这一点。

const requireRole = (role) => (WrappedComponent) => {
  return (props) => {
    const { user } = this.props;
    if (!user || !user.isAuthenticated || user.role !== role) {
      return <Redirect to={{ pathname: '/login' }} />;
    }
    return <WrappedComponent {...props} />;
  };
};

const AdminPage = requireRole('admin')((props) => (
  <div>
    <h1>Admin Page</h1>
  </div>
));

在这个例子中，我们创建了一个 requireRole HOC，它检查 user 对象的 role 属性。如果用户不是管理员，则重定向到登录页面。

总结

React Router 4.0 提供了强大的路由守卫和权限控制功能，使得我们能够轻松地保护我们的应用免受未授权访问。通过使用 Route 组件、withRouter 高阶组件以及自定义 HOC，我们可以实现灵活的路由守卫和权限控制策略。希望本文能帮助你更好地理解如何在 React Router 4.0 中实现这些功能。

-- 展开阅读全文 --