Question

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

我有一个CustomLayout和一个home组件，登录组件，注册组件。

首先将路由从app.js处理到route.js

这是我的scale_x_continuous(breaks = pretty(a_tubulin_data$Z.Scores, n = 9)) + coord_cartesian(xlim=c(-3,3))

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

Answer 1

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

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

然后使用它代替Route组件

如何设置路由，以便在未经身份验证的情况下将其重定向到“登录”？

1 个答案: