Как настроить маршрутизацию так, чтобы она была перенаправлена ​​на страницу входа в систему, если не прошла проверку подлинности?

Question

Я пытаюсь создать представление панели управления для своего приложения, я использую избыточность для управления аутентификацией. Поэтому, если пользователь не аутентифицирован, я хочу, чтобы он был перенаправлен для входа в систему, в противном случае на дом.

У меня есть CustomLayout и домашний компонент, компонент входа, компонент регистрации.

Маршрутизация сначала обрабатывается из приложения. js к маршрутам. 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' />)
       }
     />
   )
 }

, а затем использует его вместо компонента Route