React SPA 应用中如何实现路由权限控制-JavaScript中文网-JavaScript教程资源分享门户

在 React 单页应用（SPA）中，路由是非常重要的一部分，它决定了用户访问不同页面的方式。而对于一些需要权限控制的页面，如用户中心、管理员后台等，我们需要对路由进行权限控制，以确保只有授权用户才能访问这些页面。本文将介绍如何在 React SPA 应用中实现路由权限控制。

1. 路由权限控制的实现方式

在 React SPA 应用中，常见的路由权限控制方式有以下几种：

1.1 前端路由拦截

前端路由拦截是指在路由跳转之前，通过判断用户是否有权限来决定是否允许跳转。这种方式的优点是实现简单，对于一些简单的权限控制场景已经足够。但是，它的缺点也很明显，因为前端路由是可以被绕过的，所以需要结合后端权限控制来确保安全。

1.2 后端路由拦截

后端路由拦截是指在服务器端判断用户是否有权限，如果没有则返回错误信息或者重定向到其他页面。这种方式的优点是安全可靠，但是需要在服务器端进行权限控制，对于前后端分离的应用来说，需要进行跨域访问。

1.3 动态路由配置

动态路由配置是指在路由跳转之前，通过动态加载路由配置文件来判断用户是否有权限。这种方式的优点是可以根据用户的权限动态生成路由配置，对于一些复杂的权限控制场景非常有用。但是，它的缺点是需要额外的配置文件和加载时间，对性能有一定的影响。

2. 前端路由拦截的实现

在本文中，我们将介绍如何使用前端路由拦截来实现路由权限控制。我们将使用 React Router 来实现路由拦截。

2.1 安装 React Router

首先，我们需要安装 React Router：

npm install react-router-dom --save

2.2 创建路由配置

在 src 目录下创建一个 routes.js 文件，用于存放路由配置：

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

import Home from './views/Home';
import Login from './views/Login';
import User from './views/User';
import Admin from './views/Admin';

const routes = [
  {
    path: '/',
    exact: true,
    component: Home,
    isPublic: true,
  },
  {
    path: '/login',
    exact: true,
    component: Login,
    isPublic: true,
  },
  {
    path: '/user',
    exact: true,
    component: User,
    isPublic: false,
  },
  {
    path: '/admin',
    exact: true,
    component: Admin,
    isPublic: false,
    roles: ['admin'],
  },
];

const RouteWithSubRoutes = (route) => (
  <Route
    path={route.path}
    exact={route.exact}
    render={(props) => {
      // 判断是否需要登录验证
      if (!route.isPublic && !localStorage.getItem('token')) {
        return (
          <Redirect
            to={{
              pathname: '/login',
              state: { from: props.location },
            }}
          />
        );
      }

      // 判断是否需要角色验证
      if (
        !route.isPublic &&
        route.roles &&
        !route.roles.includes(localStorage.getItem('role'))
      ) {
        return <Redirect to={{ pathname: '/' }} />;
      }

      return <route.component {...props} routes={route.routes} />;
    }}
  />
);

export { routes, RouteWithSubRoutes };

在路由配置中，我们定义了四个路由：

/：首页，公开路由
/login：登录页，公开路由
/user：用户中心，需要登录验证
/admin：管理员后台，需要登录验证和角色验证（只有管理员才能访问）

我们在每个路由中增加了一个 isPublic 属性，用于判断该路由是否为公开路由。如果是公开路由，则不需要进行权限控制；如果不是公开路由，则需要进行权限控制。

我们还在 /admin 路由中增加了一个 roles 属性，用于判断用户是否具有管理员权限。

最后，我们定义了一个 RouteWithSubRoutes 组件，用于渲染路由。在该组件中，我们根据路由配置进行了权限控制。如果用户没有登录，则跳转到登录页；如果用户没有管理员权限，则跳转到首页。

2.3 创建路由组件

在 src/views 目录下创建四个组件，分别对应四个路由：

Home.jsx：首页组件
Login.jsx：登录页组件
User.jsx：用户中心组件
Admin.jsx：管理员后台组件

在每个组件中，我们可以根据需要进行业务逻辑处理，例如在 User 组件中显示用户信息，在 Admin 组件中显示管理员功能等。

2.4 渲染路由

在 App.js 中，我们需要渲染路由组件。首先，我们需要导入路由配置和 RouteWithSubRoutes 组件：

import { routes, RouteWithSubRoutes } from './routes';

然后，我们使用 map 函数遍历路由配置，根据每个路由生成 RouteWithSubRoutes 组件：

function App() {
  return (
    <div className="App">
      <Switch>
        {routes.map((route, i) => (
          <RouteWithSubRoutes key={i} {...route} />
        ))}
      </Switch>
    </div>
  );
}

这样，我们就完成了路由权限控制的实现。

3. 总结

本文介绍了在 React SPA 应用中实现路由权限控制的方法。虽然前端路由拦截的安全性有限，但是对于一些简单的权限控制场景已经足够。如果需要更高的安全性，可以结合后端路由拦截来实现。在实现路由权限控制时，我们可以使用 React Router 来简化开发，提高效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658ee650eb4cecbf2d4aea22