CanCan (or CanCanCan) for Redux

export default store => {
  const { auth: { user } } = store.getState();
 
  if (user) {
    // protected routes
    switch (user.role) {
      case 'admin':
        return ['/books', '/users'];
      case 'user_manager':
        return ['/users'];
      default:
        return ['/books'];
    }
  }
 
  // public routes
  return ['/login', '/signup'];
};

...
import { createStore } from 'redux';
import { initCanCan } from 'redux-cancan';
...
const store = createStore(...);
 
initCanCan(store, require('./ability'));
...

...
import { Link } from 'react-router-dom';
import { canManage } from 'redux-cancan';
...
const AppBar = () => {
  let navMenuItems = [];
 
  if (canManage('/users')) {
    navMenuItems.push(<Link to="/users" key="/users"><Button>Users</Button></Link>);
  }
  if (canManage('/books')) {
    navMenuItems.push(<Link to="/books" key="/books"><Button>Books</Button></Link>);
  }
 
  return (
    <div>
      <span>Timezone App</span>
      {navMenuItems}
      <button>Log out</button>
    </div>
  );
};
...

import React from 'react';
import { canManage } from 'redux-cancan';
...
class App extends React.Component {
  componentDidMount() {
    const { history, authorizeUser } = this.props;
    history.listen(authorizeUser);
  }
  ...
}
 
const mapStateToProps = state => ({});
 
const mapDispatchToProps = (dispatch, ownProps) => ({
  authorizeUser: ({ pathname }) => {
    if (!canManage(pathname)) {
      ownProps.history.replace('/404');
    }
  }
});
 
export default connect(mapStateToProps, mapDispatchToProps)(App);