How to use authorization?

[cyclops24]

I need to set some authorization rule for my admin Resource for example hide some Resource from side menu and prevent access to it.
I read https://marmelab.com/admin-on-rest/Authorization.html and see this package https://github.com/marmelab/aor-permissions and also try this:

const App = () => (
    <Admin
       theme={ myTheme }
       restClient={loopbackRestClient('http://0.0.0.0:3001/api')}
       authClient={authClient('http://0.0.0.0:3001/api/Employees/login')}
    >
        { permissions => [
            permissions === 'admin' ? <Resource name="employees" icon={ EmployeeIcon } list={EmployeeList} show={EmployeeShow} create={EmployeeCreate} edit={EmployeeEdit} remove={Delete} /> : null,
            <Resource name="projects" icon={ ProjectIcon } list={ProjectList} show={ProjectShow} create={ProjectCreate} edit={ProjectEdit} remove={Delete} />
        ]}

    </Admin>
);

export default App;

I used below code in my LoopBack boot script to create my roles:

Role.create({
      name: 'admin',
    }, function(err, role) {
      if (err) throw err;
...

But it's render below page after login with any user:

and this is my console error logs:

Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
bundle.js:11865:10
Warning: Missing translation for key: "aor.page.not_found"
browser.js:49
Warning: Missing translation for key: "aor.message.not_found"
browser.js:49
Warning: Missing translation for key: "aor.action.back"
browser.js:49
uncaught exception: Unkown method

[kodepareek]

This isn't ideally handled at the admin component level.

What you need to do is write a custom Menu component

import React from 'react';
import { Link } from 'react-router-dom';
import MenuItem from 'material-ui/MenuItem';
import { WithPermission } from 'aor-permissions';
import authClient from '../authClient';

export default ({ resources, onMenuTap, logout }) => {
  return (<div>
    <WithPermission authClient={authClient} value="admin">
      <MenuItem key={"aa"} containerElement={<Link to="/appUsers/usersByTeam" />} primaryText="Users" onTouchTap={onMenuTap} />
      {logout}
    </WithPermission>
    <WithPermission authClient={authClient} value="editing">
      <div>
        <MenuItem key={"aa"} containerElement={<Link to="/tales/talesByRelation" />} primaryText="Fresh Tales" onTouchTap={onMenuTap} />
        {logout}
      </div>
    </WithPermission>
    <WithPermission authClient={authClient} value="brandEditing">
      <div>
        <MenuItem key={"aa"} containerElement={<Link to="/tales/talesByRelation" />} primaryText="Fresh Tales" onTouchTap={onMenuTap} />
        {logout}
      </div>
    </WithPermission>
    <WithPermission authClient={authClient} value="publishing">
      <div>
        <MenuItem key={"aa"} containerElement={<Link to="/tales/talesByRelation" />} primaryText="Editor Approved Tales" onTouchTap={onMenuTap} />
        {logout}
      </div>
    </WithPermission>
  </div>
  )
}

Above is simplified for readability.

You can then import this into Admin

import Menu from './components/Menu'

Feed it to Admin

  <Admin menu={Menu}

//Rest of your Admin component

[cyclops24]

Thanks @kodepareek What about access directly to Resource? (for example type url in browser not access from menu)

Is this approach secure?

[kodepareek]

AOR is designed as an SPA so theoretically the entire page is to get loaded on the first connect with the server and no more JS etc is transferred from the server only data to be displayed via REST queries.

The underlying assumption is that the user isn't sophisticated enough to set the role value in local storage.

On the resource side, you need access control on your API side as well, setting permissions on the client will not eliminate need for that.

[kodepareek]

The URL in the browser is more for the user's reference rather than actually indicative of the current data being displayed. Most of my pages make several queries on loading.