как использовать privaterouter для перенаправления сравнения с ролью inreact js

Question

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

Приложение. js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import "./App.css";
import Home from "./Home";
import About from "./About";
import Membership from "./Membership";
import Login from "./Login";
import NoMatch from "./NoMatch";
import NavigationBar from "./components/NavigationBar";
import "bootstrap/dist/css/bootstrap.min.css";
import Admin from "./Admin";
import Dashboard from "./Dashboard";

class App extends Component {
  render() {
    return (
      <div className="App">
        <React.Fragment>
          <NavigationBar />
          <Router>
            <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/About" component={About} />
              <Route path="/Membership" component={Membership} />
              <Route path="/Login" component={Login} />
              <Route path="/Admin" component={Admin} />
              <Route path="/Dashboard" component={Dashboard} />
              <Route component={NoMatch} />
            </Switch>
          </Router>
        </React.Fragment>
      </div>
    );
  }
}

export default App;

Логин. js

import React from "react";
import { Redirect } from "react-router-dom";
import { Button } from "react-bootstrap";
import "./login.css";
import { Link } from "react-router-dom";
import axios from "axios";
export default class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      UserName: "",
      password: "",
      loggedIn: false,
    };
  }
  changeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  submitHandler = (e) => {
    e.preventDefault();

    axios
      .post("https://localhost:44329/api/Authentication/login", this.state)
      .then((res) => {
        console.log(res);
        localStorage.setItem("Token", res.data.token);
        this.setState({ loggedIn: true });
      })
      .catch((error) => {
        console.log(error);
        alert("Email or Password wrong");
      });
  };
  render() {
    const { UserName, password } = this.state;
    if (this.state.loggedIn) {
      return (
        <Redirect
          to={{
            pathname: "/Dashboard",
          }}
        />
      );
    }
    return (
      <div className="base-conatiner">
        <div className="header">Login</div>

        <div className="content">
          <div className="frm">
            <div className="frm-group">
              <label>UserName</label>
              <input
                type="text"
                name="UserName"
                placeholder="UserName"
                value={UserName}
                onChange={this.changeHandler}
              />
            </div>
            <div className="frm-group">
              <label>Password</label>
              <input
                type="password"
                name="password"
                placeholder="password"
                value={password}
                onChange={this.changeHandler}
              />
            </div>
          </div>
        </div>
        <div className="footer">
          <Button variant="outline-warning" onClick={this.submitHandler}>
            {" "}
            Login
          </Button>
        </div>
        <Link to="/Membership">Don't have Antsy account? click here..</Link>
      </div>
    );
  }
}

маршрутизатор. js

import React from "react";
import { Switch, Route } from "react-router-dom";
import { Login } from "./Login";

import { Dashboard } from "./Dashboard";

const Routes = () => (
  <Switch>
    <Route exact path="/Login" component={Login} />

    <Route exact path="/Dashboard" component={Dashboard} />
  </Switch>
);

export default Routes;

Панель инструментов. js (А также как напечатать полное имя в верхнем углу после входа в систему верно)

import React from "react";
import "./Dashboard.css";
import { Navbar, Nav } from "react-bootstrap";

export default class Dashboard extends React.Component {
  changePage() {
    window.location.href = "./Login";
  }
  constructor(props) {
    super(props);
    this.state = {
      UserName: "",
    };
  }

  render() {
    return (
      <div>
        <Navbar bg="light" variant="light">
          <button className="logout" onClick={this.changePage}>
            logout
          </button>

          <Navbar.Brand href="#home">Welcome!!</Navbar.Brand>
          <Nav className="mr-auto">
            <Nav.Link href="#profile">profile</Nav.Link>
          </Nav>

          <Navbar.Collapse className="justify-content-end">
            Signed in as: <b>username</b>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  }
}

Admin. js

import React from "react";
import { Button } from "react-bootstrap";

export default class Admin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { posts } = this.state;
    return (
      <div>
        <h1>this is admin dashboard</h1>
      </div>
    );
  }
}

Для бэкэнда я использую aspdot net core web API to и jwt токен для аутентификации. Может кто-нибудь, пожалуйста, помогите мне с этим.