Добавление перенаправления на основе ролей при входе в приложение React

Итак, у меня есть приложение, которое в настоящее время отлично работает при входе в систему, просто переводит вас в основное приложение. Я создал новую страницу с именем AdminDashboard.js и добавил в json новую часть под названием «Администратор», для которой установлено значение 1 для пользователей-администраторов и 0 для всех остальных. Я не знаю, где добавить перенаправление, где, если пользователь, входящий в систему, является администратором, он перейдет к AdminDashboard.js вместо части App.js.

JSON выглядит так

{
    "FirstName": "", 
    "LastName": "", 
    "Email": "admin", 
    "ID": 12, 
    "Admin": 1, 
    "Submitted": 0, 
    "Token": "eyJ0e1NiJ9.eNTYzMjA0NTkEyfQ._K5qNdsqJJXCiKq3XmIjFhU"
}

Текущий сводный код аналогичен этому для используемых страниц, не включая AdminDashboard.js.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Route, BrowserRouter as Router } from 'react-router-dom';

// Our Components
import Login from './components/Login';

ReactDOM.render(
    <Router>
        <div>
            <Route exact path = "/" component = {App} />
            <Route exact path = "/login" component = {Login} />
        </div>
    </Router>
    , document.getElementById('root')
);
registerServiceWorker();

App.js

import logo from './logo.svg';
import './App.css';
import AuthService from './components/AuthService';
import withAuth from './components/withAuth';
const Auth = new AuthService();

class App extends Component {

  handleLogout(){
    Auth.logout()
    this.props.history.replace('/login');
  }

  render() {
    return (
      <div className = "App">
        <div className = "App-header">
          <img src = {logo} className = "App-logo" alt = "logo" />
          <h2>Welcome {this.props.user.email}</h2>
        </div>
        <p className = "App-intro">
          <button type = "button" className = "form-submit" onClick = {this.handleLogout.bind(this)}>Logout</button>
        </p>
      </div>
    );
  }
}

export default withAuth(App);

AuthService.js

export default class AuthService {
    constructor(domain) {
        this.domain = domain || 'http://10.123.456.321'
        this.fetch = this.fetch.bind(this)
        this.login = this.login.bind(this)
        this.getProfile = this.getProfile.bind(this)
    }

    login(email, password) {
        // Get a token
        return this.fetch(`${this.domain}/Login/`, {
            method: 'POST',
            body: JSON.stringify({
                email,
                password
            })
        }).then(res => {
            this.setToken(res.Token)
            return Promise.resolve(res);
        })
    }

    loggedIn() {
        // Checks if there is a saved token and it's still valid
        const token = this.getToken()
        return !!token && !this.isTokenExpired(token) // handwaiving here
    }

    isTokenExpired(token) {
        try {
            const decoded = decode(token);
            if (decoded.exp < Date.now() / 1000) {
                return true;
            }
            else
                return false;
        }
        catch (err) {
            return false;
        }
    }

    setToken(idToken) {
        // Saves user token to localStorage
        localStorage.setItem('id_token', idToken)
    }

    getToken() {
        // Retrieves the user token from localStorage
        return localStorage.getItem('id_token')
    }

    logout() {
        // Clear user token and profile data from localStorage
        localStorage.removeItem('id_token');
    }

    getProfile() {
        return decode(this.getToken());
    }


    fetch(url, options) {
        // performs api calls sending the required authentication headers
        const headers = {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }

        if (this.loggedIn()) {
            headers['Authorization'] = 'Bearer ' + this.getToken()
        }

        return fetch(url, {
            headers,
            ...options
        })
            .then(this._checkStatus)
            .then(response => response.json())
    }

    _checkStatus(response) {
        // raises an error in case response status is not a success
        if (response.status >= 200 && response.status < 300) {
            return response
        } else {
            var error = new Error(response.statusText)
            error.response = response
            throw error
        }
    }
}

с Auth.js

import React, { Component } from 'react';
import AuthService from './AuthService';

export default function withAuth(AuthComponent) {
    const Auth = new AuthService('http://10.123.456.321');
    return class AuthWrapped extends Component {
        constructor() {
            super();
            this.state = {
                user: null
            }
        }
        componentWillMount() {
            if (!Auth.loggedIn()) {
                this.props.history.replace('/login')
            }
            else {
                try {
                    const profile = Auth.getProfile()
                    this.setState({
                        user: profile
                    })
                }
                catch(err){
                    Auth.logout()
                    this.props.history.replace('/login')
                }
            }
        }

        render() {
            if (this.state.user) {
                return (
                    <AuthComponent history = {this.props.history} user = {this.state.user} />
                )
            }
            else {
                return null
            }
        }
    };
}

Логин.js

import React, { Component } from 'react';
import './Login.css';
import AuthService from './AuthService';

class Login extends Component {
    constructor(){
        super();
        this.handleChangeEvent = this.handleChangeEvent.bind(this);
        this.handleFormSubmit = this.handleFormSubmit.bind(this);
        this.Auth = new AuthService();
    }
    componentWillMount(){
        if (this.Auth.loggedIn())
            this.props.history.replace('/');
    }
    render() {
        return (
            <div className = "center">
                <div className = "card">
                    <h1>Login</h1>
                    <form onSubmit = {this.handleFormSubmit}>
                        <input
                            className = "form-item"
                            placeholder = "Username goes here..."
                            name = "username"
                            type = "text"
                            onChange = {this.handleChangeEvent}
                        />
                        <input
                            className = "form-item"
                            placeholder = "Password goes here..."
                            name = "password"
                            type = "password"
                            onChange = {this.handleChangeEvent}
                        />
                        <input
                            className = "form-submit"
                            value = "SUBMIT"
                            type = "submit"
                        />
                    </form>
                </div>
            </div>
        );
    }

    handleFormSubmit(e){
        e.preventDefault();

        this.Auth.login(this.state.username,this.state.password)
            .then(res =>{
               this.props.history.replace('/');
            })
            .catch(err =>{
                alert(err);
            })
    }

    handleChangeEvent(e){
        this.setState(
            {
                [e.target.name]: e.target.value
            }
        )
    }
}

export default Login;