如何设置路由，以便在未进行身份验证时将其重定向到登录？

Question

我正在尝试为我的应用程序构建一个面板视图，我正在使用redux来管理身份验证。因此，如果用户没有通过身份验证，我希望他们重定向到登录，否则重定向到主页。

我有一个CustomLayout和一个主页组件、登录组件、注册组件。

路由首先处理从app.js到routes.js的

这是我的App.js

import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { connect } from "react-redux";
import BaseRouter from "./routes";
import * as actions from "./store/actions/auth";
import "semantic-ui-css/semantic.min.css";
import CustomLayout from "./containers/Layout";
class App extends Component {
componentDidMount() {
this.props.onTryAutoSignup();
}
render() {
return (
<Router>
<CustomLayout {...this.props}>
<BaseRouter />
</CustomLayout>
</Router>
);
}
}
const mapStateToProps = state => {
return {
isAuthenticated: state.auth.token !== null
};
};
const mapDispatchToProps = dispatch => {
return {
onTryAutoSignup: () => dispatch(actions.authCheckState())
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);

这是我的routes.js

import React from "react";
import { Route } from "react-router-dom";
import Hoc from "./hoc/hoc";
import Login from "./containers/Login";
import Signup from "./containers/Signup";
import HomepageLayout from "./containers/Home";
const BaseRouter = () => (
<Hoc>
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
<Route exact path="/" component={HomepageLayout} />
</Hoc>
);
export default BaseRouter;

还共享Layout.js

import React from "react";
import {
Container,
Menu
} from "semantic-ui-react";
import { Link, withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { logout } from "../store/actions/auth";
class CustomLayout extends React.Component {
render() {
const { authenticated } = this.props;
return (
<div>
<Menu fixed="top" inverted>
<Container>
<Link to="/">
<Menu.Item header>Home</Menu.Item>
</Link>
{authenticated ? (
<Menu.Item header onClick={() => this.props.logout()}>
Logout
</Menu.Item>
) : (
<React.Fragment>
<Link to="/login">
<Menu.Item header>Login</Menu.Item>
</Link>
<Link to="/signup">
<Menu.Item header>Signup</Menu.Item>
</Link>
</React.Fragment>
)}
</Container>
</Menu>
{this.props.children}

</div>
);
}
}
const mapStateToProps = state => {
return {
authenticated: state.auth.token !== null
};
};
const mapDispatchToProps = dispatch => {
return {
logout: () => dispatch(logout())
};
};
export default withRouter(
connect(
mapStateToProps,
mapDispatchToProps
)(CustomLayout)
);

Answer 1

您可以创建一个自定义路由组件，检查用户是否已登录，如果没有，则重定向到登录：

const ProtectedRoute = ({component: Component, ...rest}) =>{
return(
<Route {...rest}
render = {()=>isAuthenticated ? <Component /> : (
<Redirect to = '/login' />)
}
/>
)
}

然后使用它来代替路由组件