How to perform routeGuard in angularJS - angularjs

Question

Im building an app in angularJS where a user can Login to the the admin Panel.
Router config
app.config(["$routeProvider","$locationProvider",($routeProvider,$locationProvider)=>{
$locationProvider.hashPrefix("");
$routeProvider
.when("/",{
templateUrl: "app/views/enterticket.html"
})
.when("/adminlogin",{
templateUrl: "app/views/adminlogin.html",
controller: "adminlogin"
})
//panel is the admin section
.when("/panel",{
controller: "panel",
templateUrl: "app/views/panel.html",
})
}])
There's a service that authenticates the user to grant access to the admin panel,
auth service
app.service("auth",["$http","$location",function($http){
let api = (window.location.origin)+"/auth";
this.auth = function () {$http.get(api).then((rez)=>{
//is session is not set on server
if(!rez.data.state){
window.location.href = "#/adminlogin"
})}
}])
And finally theres the admin component
app.controller("panel",["$scope","$http","auth",function($scope,$http,auth){
auth.auth();
$scope.addTicket = ()=>{
let bearer = $scope.bearer;
let api = (window.location.origin)+"/addticket";
let postfields = JSON.stringify({"bearer":bearer});
$http.post(api,postfields).then((rez)=>{
console.log(rez);
})
}
}])
This setup is working well and there is restriction for the admin panel, however, when someone attempts to visit the admin panel without logging in, the browser flashes the admin panel template and then quickly reverts back to the admin login. Can someone suggest a way of preventing that awkward flash or even tell me a better way of implementing angularJS routeGuards, thank so much

Answer 1

You need to use resolve in when.
I forked another project and you need to tweak the code as per your requirement. (http://plnkr.co/edit/PAYTAr1sOoCmkP8q)
angular.module('app', ['ngRoute']);
angular.module('app')
.factory("authService", function($q, $timeout){
return {
verify: function(){
var deferred = $q.defer();
$timeout(function(){
// deferred.resolve(true); // if the user is allowed to access admin panel
deferred.reject(false); // if the user is not logged in
},1000);
return deferred.promise;
}
};
});
angular.module('app')
.controller('mainCtrl', function($scope) {
$scope.message = "Message in the main controller";
});
angular.module('app')
.controller('templateCtrl', function($scope) {
$scope.hello = " World";
});
angular.module('app')
.config(function($routeProvider, $locationProvider) {
$routeProvider.
when('/option1', {
templateUrl: 'template.html',
controller: 'templateCtrl',
resolve: {
greeting: function(authService, $location){
return authService.verify().then(function(result){
return true; // if the user is logged in, it will allow the user to access login panel
}, function(result){
$location.path('/login');// if not, it will redirect to login page
return false;
})
}
}
})
.when('/login', {
template: '<div>Login Message</div>'
})
});

Answer 2

Hey Alaksandar Gene i got your answer to work however it was still flashing the template. I guess the problem was from the resolve not awaiting the http call. So i decided to use cookies instead.
app.service("mainauth",function($http,$q,$timeout,$cookies){
this.mainauth = ()=>{
var defer = $q.defer();
let api = (window.location.origin)+"/auth";
if($cookies.get("ticket_admin") == null){
defer.resolve(false);
}
return defer.promise;
}
})
Then for the routing:
app.config(["$routeProvider","$locationProvider",($routeProvider,$locationProvider)=>{
$locationProvider.hashPrefix("");
$routeProvider
.when("/",{
templateUrl: "app/views/enterticket.html"
})
.when("/adminlogin",{
templateUrl: "app/views/adminlogin.html",
controller: "adminlogin"
})
.when("/panel",{
controller: "panel",
templateUrl: "app/views/panel.html",
resolve: {
mainauth: function(mainauth,$location){
mainauth.mainauth().then((rez)=>{
if(!rez){
window.location.href = "#/adminlogin"
}
})
}
}
})
}])
I suppose theres a risk of somebody imitating the cookies, and gaining access so ill put up another service to verify the session incase that happens
app.service("auth",["$http","$cookies",function($http,$cookies){
this.forceAuth = function(){
let url = (window.location.origin)+"/auth";
$http.get(url).then((rez)=>{
if(!rez.data.state){
window.location.href = "#/adminlogin"
}
})
}
}])
I can then inject the above service in the controller for added security.
PS some might wonder why i didnt inject a service that verifies the cookies directly into the controller, thats because it was still causing a flash