如何使用jwt令牌reactjs基于角色更改Navbar

如何解决如何使用jwt令牌reactjs基于角色更改Navbar

我尝试创建一个导航栏，该导航栏稍后会根据用户角色登录后进行更改，但是尝试后，导航栏在登录或注销后已成功更改，但是，如果我应该刷新浏览器。因此，如果我不刷新浏览器，则导航栏不会更改。怎么解决呢？这是app.js的代码

import React from 'react';
import './App.css';
import 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';  
import Navbarawal from './Component/Navbarawal';
import jwt_decode from 'jwt-decode';
import 'react-bootstrap';
import NavbarPembeli from './Component/NavbarUser';
import NavbarPenjual from './Component/NavbarPenjual';
import { login,register } from './View/UserFunctions';
import Routes from './Router';


class App extends React.Component {
  constructor() {
    super();
    this.state = {
      Roles: "",};
  }
  render() {
    
    const token=localStorage.getItem('usertoken');
    if(token===null){
      return (
    <div id="root">
      <Navbarawal/>
      <Routes/>
    </div>
      ) 
    }
    const decoded = jwt_decode(token);

    if (decoded.Roles === "Penjual") {
      return (
        <div id="root">
          <NavbarPenjual/>
          <Routes/>
      </div>
      )
    } else if (decoded.Roles === "Pembeli") {
      return (
    <div id="root">
      <NavbarPembeli/>
      <Routes/>
    </div>
      )
    } else {
      return (
      <div>
       <Navbarawal/>
       <Routes/>
      </div>
      )
    } 
  }
}
export default App;