Как сделать маршруты приватными, используя реагирующий маршрутизатор - PullRequest
Новая
       5

Как сделать маршруты приватными, используя реагирующий маршрутизатор

0 голосов
/ 15 апреля 2020

Я хочу сделать некоторые маршруты приватными для доступа администратора. Где при успешном входе в систему администратор может получить доступ к пути. Но здесь я сталкиваюсь с проблемой при входе в систему, он перенаправляет на error page.

Что еще мне нужно сделать здесь, чтобы сделать этот маршрут закрытым? Любое предложение. Заранее спасибо.

// main. js

import React, { Component } from 'react';
import {Switch, Route} from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Homepage from './user/Homepage';
import Aboutme from './user/AboutMe';
import Error from './user/Error';
import Dashboard from './admin/Dashboard';

class Main extends Component {
    static propTypes = {
        auth: PropTypes.object.isRequired
    }


    render(){
        const { isAuthenticated, user } = this.props.auth;

        return(
            <Switch>
            <Route  exact path="/" component={Homepage}/>
            <Route path="/about" component={Aboutme}/>
            <Route component={Error}/>
            { user ? (user.is_admin === true && isAuthenticated ? 
           ( <Route path="/dashboard" component={Dashboard}/> ) : ( <Route component={Error}/>) ):  <Route component={Error}/> }

            </Switch>

        )
    }

}

const mapStateToProps = state => ({
auth: state.auth
});

export default connect(mapStateToProps, null)(Main);

1 Ответ

1 голос
/ 15 апреля 2020

Это потому, что у вас есть 

 <Route component={Error}/>

в качестве третьего элемента переключателя.

Коммутатор отображает первого потомка или совпадает с местоположением.

Поскольку путь не указан, я думаю, он всегда будет совпадать, и Switch выиграл ' t использовать более поздние маршруты деталей.

В качестве решения либо используйте его с путем, куда вы перенаправляете, либо полностью удалите.

Если вас интересует другое решение для частных маршрутов, проверьте эту статью, например: https://tylermcginnis.com/react-router-protected-routes-authentication/

...