Authorization Decorators + documentation

[zatziky]

Hello @burczu ,

I find your library really useful. The only thing I was missing to have a complete framework were authorization decorators (not sure if it's the best name ;) ). At first I was thinking about publishing a new lib but then I realized that without your product it would again not be complete.

Have a look at it. If you find out you could use it I am open for further cooperation.

By authorization decorator I mean

<AuthorizedFor roles={['admin']}>
    <AdminTable/>
</AuthorizedFor>

and

<AuthorizedForFirst>
    <Matching roles={['user, admin']}><UserAdminTable></Matching>
    <Matching roles={['admin']}><AdminTable></Matching>
    <Matching roles={['user']}><ReadOnlyTable></Matching>
</AuthorizedForFirst>

I hope the snippets are self explanatory.

[zatziky]

@burczu I haven't noticed you responded. I am sorry. I will check this thread more. :)

I have tested the offered solution in my project. However, I didn't manage to test the package locally since using npm pack gives me only 2 files - package.json and readme.md. How do you pack it? (Well, I could publish it but I don't like this way...)

You say:

The way how user roles are stored should be left for the developer which uses this library.

I completely agree! That's why I am pointing it out as this.userRoles = /* Provide your mean to get the roles*/; in the README.md:

Decorators - Setup

To setup <AuthorizedForFirst> and <AuthorizedFor> you'll need to provide them with this.userRoles in your own inherited component as described above already.

In your code extend AuthorizedForFirst and AuthorizedFor classes:

import React from 'react';
import { AuthorizedForFirst } from 'react-router-role-authorization';

class OurAuthorizedForFirst extends AuthorizedForFirst {

    constructor(props) {
        super(props);

        this.userRoles = /* Provide your mean to get the roles*/;
      }

}

and

import React from 'react';
import { AuthorizedFor } from 'react-router-role-authorization';

class OurAuthorizedFor extends AuthorizedForFirst {

    constructor(props) {
        super(props);

        this.userRoles = /* Provide your mean to get the roles*/;
      }

}

Are we on the same wave now or am I missing something?

[burczu]

Ach... Ok, now I understand ;) You want users to extend AuthorizedForFirst and AuthorizedFor in their code. Maybe it would be better if users won't have to do it? They could just pass this information via attributes? What do you think? They would use your wrappers directly without the need to extend them...

[zatziky]

I was thinking about it before. If somebody needs the component in lot's of places it's unnecessary boilerplate to add the attributes userRoles everywhere. But then in such case they can extend the component. I will do it you're right! ;)

Btw., what about the npm pack how do you test it locally? It gives me only 2 files - package.json and readme.md...

[zatziky]

@burczu, have you had time to check the new change?

[burczu]

ah, sorry... I had a lot of work recently - I promise that I will check it till the end of this week ;)

[burczu]

According to your question about npm pack: the solution is built using webpack and there is an npm script to build the solution so, before npm pack you should run npm run build. This will create a dist folder and this folder will also appear in the package. You can find more available script in the package.json file.

I think I should add some Contribution.md file to explain it...

[zatziky]

Burczu, thx for the guide. It works. We are testing a little more simpler version of this PR. If it's successful I'll let you know and you can decide if you'd like the new way.