AngularJS authentication service using Satellizer and Laravel - angularjs

Question

I'm experimenting with Angular, trying to setup a Angular frontend powered by a laravel backend (REST API). For authentication i want to use json web tokens. For Angular i'm using Satellizer (https://github.com/sahat/satellizer) and for Laravel JWT (https://github.com/tymondesigns/jwt-auth).
At the moment, i already can login with AngularJS using correct credentials stored in Laravel. The user info and token is stored in localStorage.
I would like to implement some kind of Angular service that can check if the user is authenticated in order to protect states form ui-router. I already tried a few tuts but i'm unable te get it working. Can someone point me in the right direction? Would be awesome!
loginController (Angular)
.controller('loginCtrl', [
'$scope',
'$rootScope',
'utils',
'$auth',
'$location',
'SweetAlert',
function ($scope,$rootScope,utils, $auth, $location, SweetAlert) {
$scope.login = function() {
var credentials = {
email: $scope.email,
password: $scope.password
};
$auth.login(credentials)
.then(function (response) {
var user = JSON.stringify(response.data.user);
localStorage.setItem('currentUser', user);
$location.path('/restricted.dashboard');
})
.catch(function (response) {
SweetAlert.swal("Inloggen mislukt.", "Controleer je email adres en wachtwood en probeer opnieuw.", "warning");
console.log("LOGIN NOT OK" + response);
});
};
app.states.js (ui-router, Angular)
.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
// Use $urlRouterProvider to configure any redirects (when) and invalid urls (otherwise).
$urlRouterProvider
.when('/dashboard', '/')
.otherwise('/');
$stateProvider
.state("error.404", {
url: "/404",
templateUrl: 'app/componentsOld/pages/error_404View.html'
})
.state("error.500", {
url: "/500",
templateUrl: 'app/componentsOld/pages/error_500View.html'
})
// -- LOGIN PAGE --
.state("login", {
url: "/login",
templateUrl: 'app/components/auth/loginView.html',
controller: 'loginCtrl',
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'lazy_uikit',
'lazy_iCheck',
'app/components/auth/loginController.js',
'sweetAlert'
]);
}]
}
})
// -- RESTRICTED --
.state("restricted", {
abstract: true,
url: "",
views: {
'main_header': {
templateUrl: 'app/shared/header/headerView.html',
controller: 'main_headerCtrl'
},
'main_sidebar': {
templateUrl: 'app/shared/main_sidebar/main_sidebarView.html',
controller: 'main_sidebarCtrl'
},
'': {
templateUrl: 'app/views/restricted.html'
}
},
resolve: {
deps: ['$ocLazyLoad', function ($ocLazyLoad) {
return $ocLazyLoad.load([
'lazy_uikit',
'lazy_selectizeJS',
'lazy_switchery',
'lazy_prismJS',
'lazy_autosize',
'lazy_iCheck',
'lazy_themes',
'lazy_style_switcher',
'sweetAlert'
]);
}]
}
})
app.js (Angular)
....
// Satellizer configuration that specifies which API
// route the JWT should be retrieved from
$authProvider.loginUrl = 'zz/zz/laravel/public/api/authenticate';
// Redirect to the auth state if any other states
// are requested other than users
$urlRouterProvider.otherwise('/auth');
....
Laravel authenticateController (Laravel 5.2)
public function authenticate(Request $request)
{
$credentials = $request->only('email', 'password');
try {
// verify the credentials and create a token for the user
if (!$token = JWTAuth::attempt($credentials)) {
return response()->json(['error' => 'invalid_credentials'], 401);
}
} catch (JWTException $e) {
// something went wrong
return response()->json(['error' => 'could_not_create_token'], 500);
}
$user = Auth::user();
//$user->company;
//$street = $user->company->street;
// if no errors are encountered we can return a JWT
return response()->json([
"token" => $token,
"user" => $user
]);
}
What i would like to accomplish is creating a laravel Middleware for Angular so that we can check if a user is authenticated and in the future he or she has the right user role to load a Angular state.
Thanks for taking time for my issue. I'm looking forward to see how you would handle this :)

Answer 1

I found this solution somewhere on SO a while ago and it suits my needs(cant provide original answer yet, credits to the original answer). Event hough I use $routeProvider, I think you can apply similar logic with $stateProvider
.config(function ($routeProvider) {
$routeProvider
.when('/awesomeRoute', {
templateUrl: 'views/view.tpl.html',
controller: 'someAwesomeCtrl',
controllerAs: 'someCtrl',
resolve : {
//This function is injected with the AuthService where you'll put your authentication logic
'auth' : function(AuthService){
return AuthService.authenticate();
}
}
})
})
The Auth service:
.factory('AuthService', function($q, Service, $window, $location){
return {
authenticate : function(){
//Authentication logic here, some service to check
against backend if token you provided is valid and/or you are authorized to enter those sections of application,
or in your case with satellizer you can use `$auth.isAuthenticated()` method.
Service.isTokenValid(_yourToken).then( (res) => {
if(res.data === true){
return true;
} else {
return $q.reject('Not Authenticated');
}
}, (err) => {
$location.path('/');
return $q.reject('Not Authenticated');
})
} else {
return $q.reject('Not Authenticated');
}
}
};
})
and finally the "route error catcher", when there is something wrong, return home or to /auth route
.run(function($rootScope, $location){
//If the route change failed due to authentication error, redirect them out
$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
if(rejection === 'Not Authenticated'){
$location.path('/');
}
});
})