【React 】react 中的路由鉴权与路由拦截

这篇具有很好参考价值的文章主要介绍了【React 】react 中的路由鉴权与路由拦截。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


在 React 中, 路由拦截路由鉴权是两个相关但不完全相同的概念。

1 路由拦截

路由拦截(Route Interception)**是指在用户导航到某个路由之前,通过某种逻辑来拦截、检查或修改导航行为。**它可以用于实现权限控制、身份验证、页面加载前的准备工作等场景。在路由拦截中,你可以决定是否允许用户继续访问目标路由或进行其他操作。

实现路由拦截可以借助 React 路由库中提供的特性。下面以 React Router 作为示例,介绍如何实现路由拦截:

  1. 首先,确保你的 React 应用中已经安装并导入了 React Router 库。
  2. 在你的应用中定义路由配置,包括需要拦截的路由以及对应的组件。例如:
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route path="/private" component={PrivateComponent} />
      <Route path="/public" component={PublicComponent} />
    </Router>
  );
}
  1. 在需要进行拦截的组件中,使用 Route 组件的 render 属性来定义拦截逻辑。例如,实现需要登录才能访问的私有页面
import { Route, Redirect } from 'react-router-dom';

// 私有页面(登录才能访问)
function PrivateComponent() {、
  // 检查用户是否已经登录
  const isAuthenticated = checkUserAuthentication(); 

  // 未登录则重定向到登录页面                           
  if (!isAuthenticated) {
    return <Redirect to="/login" />; 
  }
                             
  // 已登录则显示私有组件
  return <h1>Private Component</h1>; 
}

在上述示例中,通过 checkUserAuthentication 函数检查用户是否已经登录,若未登录则使用 Redirect 组件将用户重定向到登录页面。

  1. 在根组件中,使用 Route 组件来定义全局的路由拦截逻辑。例如,实现需要身份验证才能访问的所有页面:
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

function App() {
  const isAuthenticated = checkUserAuthentication(); // 检查用户是否已经登录

  return (
    <Router>
      <Route
        path="/"
        render={() =>
          isAuthenticated ? (
            <Redirect to="/private" /> // 已登录则重定向到私有页面
          ) : (
            <Redirect to="/public" /> // 未登录则重定向到公共页面
          )
        }
      />
      <Route path="/private" component={PrivateComponent} />
      <Route path="/public" component={PublicComponent} />
    </Router>
  );
}

在上述示例中,根据 isAuthenticated 的值,通过 render 属性动态决定用户访问根路由时的跳转目标。

通过以上步骤,你可以实现基本的路由拦截功能。根据具体需求,你可以根据拦截逻辑进行更复杂的处理,比如从后端获取权限信息、展示不同的错误提示等。请根据你使用的具体路由库的文档和 API 进一步了解和实现路由拦截的细节。

2 路由鉴权

路由鉴权(Route Authorization)则**是一种在用户访问某个路由之前验证用户权限或角色的过程。**它用于限制用户访问特定页面或功能。在路由鉴权中,你会通过判断用户的权限或角色来决定是否允许用户访问目标路由。如果用户权限不满足要求,你可以重定向到其他页面或展示相应的提示信息。

以下是一个示例,展示如何在 React 应用中实现基本的路由鉴权:

  1. 首先,确保你的 React 应用中已经安装并导入了 React Router 库。
  2. 在你的应用中定义路由配置,并为需要进行鉴权的路由添加所需的角色或权限信息。例如:
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';

const routes = [
  {
    path: '/public',
    component: PublicComponent,
    allowedRoles: ['guest', 'user'], // 允许的角色
  },
  {
    path: '/private',
    component: PrivateComponent,
    allowedRoles: ['user', 'admin'], // 允许的角色
  },
];

function App() {
  return (
    <Router>
      {routes.map((route, index) => (
        <Route
          key={index}
          path={route.path}
          render={(props) => (
            <AuthorizedRoute
              component={route.component}
              allowedRoles={route.allowedRoles}
              {...props}
            />
          )}
        />
      ))}
    </Router>
  );
}
  1. 创建一个自定义的 AuthorizedRoute 组件,用于检查用户的角色是否满足该路由所需的角色。例如:
import { Route, Redirect } from 'react-router-dom';

function AuthorizedRoute({ component: Component, allowedRoles, ...rest }) {
  const userRoles = getUserRoles(); // 获取当前用户的角色信息

  if (!userRoles || !allowedRoles.includes(userRoles)) {
    return <Redirect to="/unauthorized" />; // 角色不匹配,则重定向到未授权页面
  }

  return <Route {...rest} render={(props) => <Component {...props} />} />;
}

在上述示例中,使用 getUserRoles 函数获取当前用户的角色信息,并根据角色信息判断是否满足路由所需的角色。如果不满足,则使用 Redirect 组件将用户重定向到未授权页面;如果满足,则渲染对应的路由组件。

  1. 在你的应用中定义未授权页面(Unauthorized Page),用于展示用户未被授权访问的提示信息。
function UnauthorizedPage() {
  return <h1>Unauthorized Access</h1>;
}

在路由配置中添加未授权页面的路由,以便在角色不匹配时显示该页面。

通过以上步骤,你可以实现基本的路由鉴权功能。根据具体需求,你可以扩展鉴权逻辑,比如从后端获取用户角色信息、动态控制路由的可访问性等。请根据你使用的具体路由库的文档和 API 进一步了解和实现路由鉴权的细节。

3 路由拦截和路由鉴权结合使用

在实际应用中,路由拦截和路由鉴权通常会结合使用,以实现更完整的访问控制和权限管理。

以下是一个示例,展示如何在 React 中结合使用路由拦截和路由鉴权:

  1. 首先,确保你的 React 应用中已经安装并导入了 React Router 库。
  2. 定义路由配置和相关组件,包括需要拦截和鉴权的路由以及对应的组件。
  3. 创建一个高阶组件(Higher-Order Component,HOC),用于实现路由拦截和鉴权的逻辑。例如:
import { Route, Redirect } from 'react-router-dom';

function withAuthorization(Component, allowedRoles) {
  return function AuthorizedRoute(props) {
    const isAuthenticated = checkUserAuthentication(); // 检查用户是否已经登录
    const userRoles = getUserRoles(); // 获取当前用户的角色信息

    if (!isAuthenticated) {
      return <Redirect to="/login" />; // 未登录则重定向到登录页面
    }

    if (!userRoles || !allowedRoles.includes(userRoles)) {
      return <Redirect to="/unauthorized" />; // 角色不匹配,则重定向到未授权页面
    }

    return <Component {...props} />;
  };
}

在上述示例中,withAuthorization 是一个高阶组件,接受一个组件和允许的角色列表作为参数。它根据用户的登录状态和角色信息来判断是否允许用户访问目标路由,如果不允许,则进行相应的重定向。

  1. 在路由配置中使用高阶组件包装需要进行拦截和鉴权的路由组件。例如:
import { BrowserRouter as Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Route
        path="/public"
        component={PublicComponent}
      />
      <Route
        path="/private"
        component={withAuthorization(PrivateComponent, ['user', 'admin'])}
      />
      <Route
        path="/unauthorized"
        component={UnauthorizedPage}
      />
    </Router>
  );
}

在上述示例中,PrivateComponent 组件通过 withAuthorization 高阶组件进行鉴权,只有角色为 ‘user’ 或 ‘admin’ 的用户才能访问该路由。如果用户角色不满足要求,则重定向到 /unauthorized 页面。

通过以上步骤,你可以结合路由拦截和路由鉴权实现访问控制和权限管理的功能。根据具体需求,你可以根据实际情况对路由拦截和鉴权的逻辑进行进一步的扩展和优化。请根据你使用的具体路由库的文档和 API 进一步了解和实现路由拦击和路由鉴权的细节。文章来源地址https://www.toymoban.com/news/detail-682586.html

到了这里,关于【React 】react 中的路由鉴权与路由拦截的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端知识】React 基础巩固(四十一)——手动路由跳转、参数传递及路由配置

    利用 useNavigate 封装一个 withRouter(hoc/with_router.js) 添加到hoc/index.js文件中 利用withRouter,拦截Home组件,实现手动跳转路由 路由参数传递包括:1.动态路由传参;2.查询字符串传参 改造withRouter,通过 useParams() 和 useSearchParams() 来接收两种参数传递: 在界面中,通过params来接收

    2024年02月14日
    浏览(51)
  • React.js前端 + Spring Boot后端员工管理

    该项目是一个员工管理系统,前端使用 React.js 构建,后端使用 Spring Boot 和 Data JPA 和 Lombok 构建。它提供了有效管理员工信息的全面解决方案。 特征 响应式设计:响应式 UI 设计,确保跨各种设备的可用性。 数据验证:验证用户输入以确保数据完整性。 使用的技术 前端:R

    2024年04月28日
    浏览(50)
  • 鉴权与身份认证

    ​ 所谓鉴权就是 身份认证 ,就是验证您是否有权限从服务器访问或操作相关数据。通俗的讲就是一个门禁,您想要进入室内,必须通过门禁验证身份,这就是鉴权,如打开一个网站必须要输入用户名和密码才可以登录进入,这种就是鉴权,还有一些业务需要登录以后才可以

    2024年03月14日
    浏览(69)
  • 前端js react vue怎么实现在线预览doc文档

    先说结论: 目前在纯前端层面没有很好的方案,基本都需要服务端的介入。 优点 :简单易用,无需配置 缺点 :文档需要支持外网访问,且文档会是公开可见的,所以对于一些内部敏感的文档来说,这个显然是不可行的。 需要后端介入配合 onlyoffice地址 这个也要先在服务器

    2024年02月15日
    浏览(85)
  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(93)
  • react之按钮鉴权

    使用HOC来完成 HOC :高阶组件,是React中复用组件逻辑的一种高级技巧。HOC自身不是React API的一部分,他是一种基于React的组合特性而形成的设计模式。 作用 :用于复用组件的业务逻辑 用户数据渲染带操作按钮渲染 使用HOC完成按钮鉴权 Hoc的写法: 高阶组件是 参数为组件 ,

    2024年02月01日
    浏览(23)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(60)
  • 前端刷新页面的五种方法(含原生js、vue和react)

    1、window.history.go(0)方法 2、location.reload()方法 3、location.href=location.href方法 4、vue-router方法 5、react-router方法

    2024年02月16日
    浏览(51)
  • React Router 中的路由导航方法:push() 和 replace() 详解

    在 React Router 中, this.props.history.push() 和 this.props.history.replace() 是用于编程式导航的两个常用方法。它们允许我们在组件中动态地更改路由,并可选地传递状态参数。本文将介绍这两个方法的用法和区别。 push() 方法将在导航时创建一个新的历史记录条目,并将用户重定向到新

    2024年03月15日
    浏览(47)
  • SpringBoot 使用 Sa-Token 完成路由拦截鉴权

    在前文,我们详细的讲述了在 Sa-Token 如何使用注解进行权限认证,注解鉴权虽然方便,却并不适合所有鉴权场景。 假设有如下需求:项目中所有接口均需要登录认证校验,只有 “登录接口” 本身对外开放。 如果我们对项目所有接口都加上 @SaCheckLogin 注解,会显得非常冗余

    2024年02月05日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包