Setting JWT Token and User Auth and Role based with Redux Toolkit and Typescript

Back at school i did this piece of code to validate tokens, users role and user auth: Auth Token:

const setAuthToken = token => {
  if (token) {
    //apply auth token to every request if logged in
    axios.defaults.headers.common['Authotization'] = token;
  } else {
    //delete auth header
    delete axios.defaults.headers.common['Authorization'];
  }
};

export default setAuthToken;

Private route

const PrivateRoute = ({
  component: Component,
  userRoles = [],
  roles = [],
  auth,
  ...rest
}) => {
  // check the route's roles to see if any match a role the user has
  const hasRole = roles.some(role => userRoles.includes(role));

  return (
    <Route
      {...rest}
      render={props =>
        auth.isAuthenticated === true && hasRole ? (
          <Component {...props} />
        ) : (
          <Redirect to='/' />
        )
      }
    />
  );
};

PrivateRoute.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  userRoles: state.auth.user.role,
  auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);

Routes:

export default {
  routes: [
    {
      component: Charts,
      url: '/charts',
      roles: ['admin']
    },
    {
      component: MapParkings,
      url: '/marParkings',
      roles: ['admin']
    },
    

And my App.js would looke like this

import routesConfig from './PrivateRoute/routesConfig';

if (localStorage.jwtToken) {
  // Set auth token header auth
  const token = localStorage.jwtToken;
  setAuthToken(token);
  // Decode token and get user info and exp
  const decoded = jwt_decode(token);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));
  // Check for expired token
  const currentTime = Date.now() / 1000; // to get in milliseconds
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());
    // Redirect to login
    window.location.href = './searchVehicles';
  }
}

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className='App'>
            <Navbar />

            <Switch>
              {routesConfig.routes.map(({ component, roles, url }) =>
                roles.length ? (
                  <PrivateRoute
                    exact
                    path={url}
                    component={component}
                    roles={roles}
                  />
                ) : (
                  <Route exact path={url} component={component} />
                )
              )}
            </Switch>
          </div>
        </Router>
      </Provider>
    );
  }
}
export default App;

Now im using redux toolkit and typescript.. is there a better way or more modern way to set this up please? And how could i do it with the redux kit and ts ?