总体概述
一个完善的路由系统应该是这样子的，当链接到的组件是需要登录后才能查看，要能够跳转到登录页，然后登录成功后又跳回来之前想访问的页面。这里主要是用一个权限控制类来定义路由路由信息，同时用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`，我们可以创建一个强大的路由权限控制系统，既能防止未授权的访问，也能在用户登录成功后引导他们回到原本尝试访问的页面。这不仅提高了用户体验，也加强了应用的安全性。
