Role-Based Angular JS Client-Side Authentication and Authorization Module
-
Set auth. token to all http requests header once logged in
-
Broadcast a message from $rootScope whenever;
- accessed a route defined with
authRequired
without login - received 401 response from http requests
- accessed a route defined with
-
Provides methods to access the related window.sessionStorage data
- Auth.create(data), to save credentials
- Auth.destroy(), to delete all credentials
- Auth.permittedTo(role), to check if the current user has the given role
- Auth.get(key), to retrieve auth data
- Encode or decode access token, i.e. JWT (This should be done at server-side)
- Do anything until you catch
ahth-required
message AND use it
For server-side implementation with Node/Express, please refer this example
-
Include
angularjs-auth
module as yor app dependency<script src="angularjs-auth.js"></script> ... var app = angular.module('myapp', ['ngRoute', 'angularjsAuth']);
-
Add
authRequired
with the value of required role to your route config. and, register $http interceptor,AuthInterceptor
, to setx-access-token
for all http requests and to broadcastauth-required
event for all errored http responses, 401(Unauthorized)app.config(function($routeProvider) { $routeProvider .when('/public', {templateUrl: 'public.html', controller: 'MyController'}) .when('/admin', { templateUrl: 'admin.html', controller: 'MyController', authRequired: 'admin' // <------ LIKE THIS }) .otherwise({ redirectTo: '/public' }); $httpProvider.interceptors.push('AuthInterceptor'); // <------- AND THIS });
-
Include
Auth
service in your controller as a dependency.app.controller('MyController', function($scope, $http, $location, Auth) { ... }
DONE!! Now you are ready to login and logoff
-
Whenever login is required, you receive
auth-required
message, then you show login page to users as follows. It's your decision what to do with this message; redirect to login page, show login section, or show alert message.$scope.$on("auth-required", function(event, reason) { $location.url("/login?redir=" + encodeURIComponent(reason.route.originalPath) ); });
-
User enters and submits credentials and receive the response
$scope.submitLogin = function () { $http({ url: '/login', params: {username: $scope.username, password: $scope.password} }).success(function (data) { Auth.create(data); // create sessionStorage data $location.path($location.search().redir); // redirect to the url user asked }).error(function () { $scope.message = "Invalid username or password"; }); };
You simply invoke Auth.destroy()
method
$scope.logoff = function() {
Auth.destroy();
}
Use Auth.isLoggedIn()
to check if the user is logged in or not
<div ng-controller="MyController">
<div ng-if="Auth.isLoggedIn()">
Hello, {{Auth.get('username')}} <a ng-href="#/login" ng-click="logoff()">logoff</a>
</div>
<div ng-if="!Auth.isLoggedIn()">
<a ng-href="#/login">Login</a>
</div>
</div>
Use Auth.permittedTo(ROLE)
method to check if the user has the given role or not
<div ng-if="Auth.permittedTo('admin')">
!!! Only user with admin role can see this !!!!
</div>