const formRef = ref<FormInstance>() const sceneData = ref<SceneData[]>(); const pageNo = ref<number>(1); const pageSize = ref<number>(10); const pageCount = ref<number>(10); const totalPage = ref<number>(10); const editDialogFormVisible = ref<boolean>(fal

时间: 2024-04-21 21:24:10 浏览: 198

react router4+redux实现路由权限控制的方法

总体概述一个完善的路由系统应该是这样子的，当链接到的组件是需要登录后才能查看，要能够跳转到登录页，然后登录成功后又跳回来之前想访问的页面。这里主要是用一个权限控制类来定义路由路由信息，同时用redux把登录成功后要访问的路由地址给保存起来，登录成功时看redux里面有没有存地址，如果没有存地址就跳转到默认路由地址。路由权限控制类在这个方法里面，通过sessionStorage判断是否登录了，如果没有登录，就保存一下当前想要跳转的路由到redux里面。然后跳转到我们登录页。 import React from 'react' import { Route, Redirect } fr 在React应用中，路由权限控制是一项重要的功能，它确保用户只有在满足特定条件（如登录状态）时才能访问特定的页面。本篇文章将探讨如何利用`react-router-dom`的v4版本结合`redux`实现这样的控制机制。我们要创建一个权限控制组件`AuthorizedRoute`。这个组件会接收`component`、`location`等属性，并根据`sessionStorage`中的`userName`判断用户是否已登录。如果用户未登录，`AuthorizedRoute`会保存当前请求的路径到`redux`的store中，然后重定向到登录页。代码如下： ```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; ``` 接下来，我们需要定义路由信息。这里使用`BrowserRouter`、`Switch`和`Route`组件。对于需要登录才能访问的路由，我们使用`AuthorizedRoute`包裹。例如： ```jsx import React from 'react'; import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'; import AuthorizedRoute from './AuthorizedRoute'; // ...其他组件导入 export const Router = () => ( <BrowserRouter> <div> <Switch> <Route path="/login" component={Login} /> <Redirect from="/" exact to="/login" /> {/* 其他已定义好的路由 */} <AuthorizedRoute path="/protected-route" component={ProtectedComponent} /> <Route component={NoFound} /> </Switch> </div> </BrowserRouter> ); ``` 登录页`Login`负责处理用户的登录逻辑。在用户登录成功后，我们需要从`redux`的store中获取之前保存的登录后要跳转的URL，如果没有则跳转到默认页面。可以使用`connect`函数将`redux`的store与组件连接，并在表单提交时处理逻辑： ```jsx import React from 'react'; import { Form, Icon, Input, Button, Checkbox } from 'antd'; import { withRouter, useHistory } from 'react-router-dom'; import { connect } from 'react-redux'; import { login } from '../../mock/mock'; // 假设这是你的登录接口 const FormItem = Form.Item; class NormalLoginForm extends React.Component { constructor(props) { super(props); // ... } handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { login(values).then((response) => { if (response.success) { const redirectUrl = this.props.loginRedirectUrl || '/default-page'; this.props.history.push(redirectUrl); } else { // 登录失败处理... } }); } }); }; // ...其他方法和属性 } const mapStateToProps = (state) => ({ loginRedirectUrl: state.login.loginRedirectUrl, // 从store中获取登录后要跳转的URL }); export default withRouter(connect(mapStateToProps)(NormalLoginForm)); ``` 在这个例子中，我们假设`loginAction`中有一个`setLoginRedirectUrl`的action Creator用于将要跳转的URL保存到`redux`的store中，而`login`接口则用于处理实际的登录逻辑。当用户成功登录后，`handleSubmit`函数会从`redux`的store中获取登录后要跳转的URL，并使用`history.push`进行重定向。总结来说，通过结合`react-router-dom`和`redux`，我们可以创建一个强大的路由权限控制系统，既能防止未授权的访问，也能在用户登录成功后引导他们回到原本尝试访问的页面。这不仅提高了用户体验，也加强了应用的安全性。

这段代码是一个Vue组件中的变量声明部分。其中使用了Vue 3的Composition API中的`ref`函数来声明变量，并给予初始值。 - `formRef`是一个引用类型变量，用于引用一个FormInstance对象。 - `sceneData`是一个引用类型变量，用于引用一个SceneData数组。 - `pageNo`是一个引用类型变量，用于引用一个number类型的值，初始值为1。 - `pageSize`是一个引用类型变量，用于引用一个number类型的值，初始值为10。 - `pageCount`是一个引用类型变量，用于引用一个number类型的值，初始值为10。 - `totalPage`是一个引用类型变量，用于引用一个number类型的值，初始值为10。 - `editDialogFormVisible`是一个引用类型变量，用于引用一个boolean类型的值，初始值为false。这些变量可能用于Vue组件中的数据绑定和状态管理。

阅读全文

const formRef = ref<FormInstance>() const sceneData = ref<SceneData[]>(); const pageNo = ref<number>(1); const pageSize = ref<number>(10); const pageCount = ref<number>(10); const totalPage = ref<number>(10); const editDialogFormVisible = ref<boolean>(fal

相关推荐

const data彻底研究

asp.net汽车销售网站

const getHasUser = async (pager = 1) => { // 收集当前页码 pageNo.value = pager let res: UserResponseData = await reqUserInfo( pageNo.value, pageSize.value, keyword.value, ) if (res.code === 200) { total.value = res.data.total userArr.value = res.data.records } }详细解释上述代码

const deleteUser = async (userId: number) => { let res: any = await reqRemoveUser(userId) if (res.code === 200) { ElMessage({ type: 'success', message: '删除成功' }) getHasUser(userArr.value.length > 1 ? pageNo.value : pageNo.value - 1) } }解释上述代码

MATLAB-四连杆机构的仿真+项目源码+文档说明

ridge_regression:用于岭回归的python代码（已实现以预测下个月的CO2浓度）

Polygon3-3.0.8-cp35-cp35m-win_amd64.whl.rar

最新推荐

MATLAB-四连杆机构的仿真+项目源码+文档说明

SSM Java项目：StudentInfo 数据管理与可视化分析

管理建模和仿真的文件

负载均衡技术深入解析：确保高可用性的网络服务策略

怎么解决头文件重复包含

pyedgar：Python库简化EDGAR数据交互与文档下载

"互动学习：行动中的多样性与论文攻读经历"

网络监控工具使用宝典：实时追踪网络状况的专家级技巧

unity 实现子物体不跟随父物体移动和旋转

Node.js环境下wfdb文件解码与实时数据处理