"这篇文章主要讲解了如何在React Router 4版本中结合Redux实现路由权限控制。作者通过创建一个授权路由组件`AuthorizedRoute`,利用sessionStorage检查用户是否已登录,并结合Redux存储和处理登录后的跳转路径。" 在React应用中,尤其是涉及到用户登录和权限控制的场景,路由管理扮演着至关重要的角色。React Router 4 是一款强大的路由库,它允许开发者声明式地定义应用的导航结构。而Redux则是一个状态管理库,用于集中管理应用的状态,包括用户登录状态和需要权限访问的路由信息。 `AuthorizedRoute` 是这个实现的核心组件,它继承自React Router的`Route`组件。这个组件首先通过`sessionStorage`检查用户是否已登录,如果未登录,则将当前尝试访问的路由路径保存到Redux的store中,然后重定向至登录页。这里`setLoginRedirectUrl`是一个Action Creator,它将登录后的目标路径添加到 Redux 的状态中。 ```jsx import React from 'react'; import { Route, Redirect } from 'react-router-dom'; import { setLoginRedirectUrl } from '../actions/loginAction'; class AuthorizedRoute extends React.Component { render() { const { component: Component, rest } = this.props; const isLogged = sessionStorage.getItem("userName") !== null ? true : false; if (!isLogged) { setLoginRedirectUrl(this.props.location.pathname); } return ( <Route {...rest} render={props => { return isLogged ? <Component {...props} /> : <Redirect to="/login" />; }} /> ) } } export default AuthorizedRoute; ``` 在定义路由时,对于需要登录后才能访问的页面,我们可以使用`AuthorizedRoute`组件来包装这些页面的路由配置,这样可以确保只有登录用户才能访问这些页面。例如: ```jsx import React from 'react'; import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; import Layout from '...'; // 布局组件 // 其他路由定义... // 需要登录的路由 <AuthorizedRoute exact path="/protected" component={ProtectedPage} /> // 登录路由 <Route exact path="/login" component={LoginPage} /> ``` 当用户登录成功后,我们需要检查Redux store中是否存储了登录后的跳转路径。如果有,就根据这个路径进行跳转,否则默认重定向到一个公共的首页或仪表盘页面。这部分逻辑通常在登录成功后触发的Action或者Reducer中完成。 通过这种方式,React Router 4 和 Redux 结合使用,可以实现灵活且易于维护的路由权限控制。这种方法不仅适用于简单的重定向,还可以扩展到更复杂的权限系统,如根据用户角色来决定他们可以访问哪些页面。
![](https://csdnimg.cn/release/download_crawler_static/12760468/bg1.jpg)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://profile-avatar.csdnimg.cn/default.jpg!1)
- 粉丝: 9
- 资源: 907
我的内容管理 收起
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![](https://csdnimg.cn/release/wenkucmsfe/public/img/voice.245cc511.png)
会员权益专享
最新资源
- VMP技术解析:Handle块优化与壳模板初始化
- C++ Primer 第四版更新:现代编程风格与标准库
- 计算机系统基础实验:缓冲区溢出攻击(Lab3)
- 中国结算网上业务平台:证券登记操作详解与常见问题
- FPGA驱动的五子棋博弈系统:加速与创新娱乐体验
- 多旋翼飞行器定点位置控制器设计实验
- 基于流量预测与潮汐效应的动态载频优化策略
- SQL练习:查询分析与高级操作
- 海底数据中心散热优化:从MATLAB到动态模拟
- 移动应用作业:MyDiaryBook - Google Material Design 日记APP
- Linux提权技术详解:从内核漏洞到Sudo配置错误
- 93分钟快速入门 LaTeX:从入门到实践
- 5G测试新挑战与罗德与施瓦茨解决方案
- EAS系统性能优化与故障诊断指南
- Java并发编程:JUC核心概念解析与应用
- 数据结构实验报告:基于不同存储结构的线性表和树实现
![](https://img-home.csdnimg.cn/images/20220527035711.png)
![](https://img-home.csdnimg.cn/images/20220527035111.png)
![](https://csdnimg.cn/release/wenkucmsfe/public/img/green-success.6a4acb44.png)