Restful Authorization In The Ui

I have two separate applications, an API (built with Flask) and a HTML/JS UI. The API handles both, authentication and authorisation. Authentication is already working properly usi

Solution 1:

It all depends on what type of authorization logic you need. You're going to want some JS objects, in the example below I created an Ability object whose constructor function takes three parameters: user, car, company.

varAbility = function(user, car, company){
  this.user = user;
  this.car = car;
  this.company = company;
}

Ability.prototype.canSellCar = function(){
  returnthis.user.id == car.userId;
}

Ability.prototype.canWorkForCompany = function(){
   this.user.skills.forEach(function(skill, index){
     if(this.company.soughtSkills.indexOf(skill) !== undefined){
       returntrue
     }
   }
   returnfalse;
}

Then you can create a new instance of the Ability object and pass it in instances of a user, car, and company, like so

var bobs_abilities = new Ability(bob, truck, government)

Finally you can call the methods you defined your ability's prototype.

if(bobs_abilities.canSellCar){
  // UPDATE THE DOM TO SHOW THE UI ELEMENT THAT CONTROLS CAR SELLING
}

Hopefully this is a good start for you. Your ability class might need to do additional steps like make api calls to your server to get more information, or you might need to pass parameters into the functions defined on the Ability prototype.

If you were doing this with angular you might make the function's on the prototype into their own directives so that your html would look like

<divcan-sell-caruser={{bob}}car={{truck}}company={{government}}>
  //Stuff you want to show in here
</div>

Definitely check out https://egghead.io/ if you want to look into using angular