Giter Site home page Giter Site logo

angular-permission's Introduction

alt tag

Permission

Role and permission based authentication on routes as simple as it can get.

  • Requires you to use ui-router as your router module.

Permission is the gatekeeper for your routes

Permission helps you gain control of your routes, by using simple concepts for you to decide who can access them. I've seen plenty of big fat tutorials on access control implementations, and they can be quite overwhelming. So I bring you a simple, powerful, straightforward solution.

Important

Please remember this project is very new, I wouldn't recommend yet using this in a big project just yet as, like any new project, might drastically change over time.

Install via bower

bower install angular-permission --save

Include to your dependencies

angular.module('yourModule', [..., 'permission']);

Setting route permissions/roles

This is how simple Permission makes it for you to define a route which requires authorization.

  // We define a route via ui-router's $routeProvider
  $routeProvider
    .state('staffpanel', {
      url: '...',
      data: {
        permissions: {
          only: ['admin', 'moderator']
        }
      }
    });

You can either set an only or an except array.

  // Let's prevent anonymous users from looking at a dashboard
  $routeProvider
    .state('dashboard', {
      url: '...',
      data: {
        permissions: {
          except: ['anonymous']
        }
      }
    });

Another thing you can do is set a redirect url to which unauthorized sessions will go to.

  $routeProvider
    .state('dashboard', {
      url: '...',
      data: {
        permissions: {
          except: ['anonymous'],
          redirectTo: 'login'
        }
      }
    });

Defining roles

So, how do yo tell Permission what does 'anonymous', 'admin' or 'foo' mean and how to know if the current user belongs to those definitions?

Well, Permission allows you to define different 'roles' along with the logic that determines if the current session belongs to them.

  // Let's imagine we have a User service which has information about the current user in the session
  // and is undefined if no session is active
  //
  // We will define the following roles:
  // anonymous: When there is not user currenly logged in
  // normal: A user with isAdmin = false
  // admin: A user with isAdmin = true
  
  angular.module('fooModule', ['permission', 'user'])
    .run(function (Permission, User), {
      // Define anonymous role
      Permission.defineRole('anonymous', function () {
        // If the returned value is *truthy* then the user has the role, otherwise they don't
        if (!User) {
          return true; // Is anonymous
        }
        return false;
      });
    });

Sometimes you will need to call some a back-end api or some other asyncronous task to define the role For that you can use promises

  angular.module('barModule', ['permission', 'user'])
    .run(function (Permission, User, $q) {
      Permission
        // Define user role calling back-end
        .defineRole('user', function () {
          // This time we will return a promise
          // If the promise *resolves* then the user has the role, if it *rejects* (you guessed it)
          
          // Let's assume this returns a promise that resolves or rejects if session is active
          return User.checkSession();
        })
        // A different example for admin
        .defineRole('admin', function () {
          var deferred = $q.defer();
          
          User.getAccessLevel().then(function (data) {
            if (data.accessLevel === 'admin') {
              deferred.resolve();
            } else {
              deferred.reject();
            }
          }, function () {
            // Error with request
            deferred.reject();
          });
          
          return deferred.promise;
        });
    });

As you can see, Permission is useful wether you want a role-based access control or a permission-based one, as it allows you to define this behaviour however you want to.

TODOS:

Help fill this list with your feature requests

  • More powerful redirection to allow passing state parameters and other useful stuff ui-router provides. Ideas anyone?
  • Inheritance (example: 'admin' inherits from 'user')
  • Role validation caching?

Contribute

This project is still in diapers and I would love your feedback / help in making this a great module for angular developers to use

Author

  • Rafael Vidaurre
  • @narzerus
  • I'm a full-stack developer currenly working as CTO and Co-Founder at Finciero

angular-permission's People

Contributors

rafaelvidaurre avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.