Angular CanActivate failing on browser refresh even though observable returns true












0















We have a routing guard for CanActivate that works fine when clicking between links on the site, but fails when we fully refresh the browser (i.e. it redirects to the home page, the same behaviour as if CanActivate returns false).



This is my guard



@Injectable()
export class PermissionCheckGuard implements CanActivate {
constructor(private userPermissionService: UserPermissionService) { }

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

hasPermission$.subscribe(x => {
console.log(x);
});

return hasPermission$;
}
}


This is my router config:-



path: 'security/security-example', component: SecurityExampleComponent, canActivate: [PermissionCheckGuard], data: { permissionTag: 'Site_Permission_1' }


In case it matters this is the hasPermission function



 public hasPermission(userId: string, subjectType: SubjectType, permissionTag: string, subjectId: string): Observable<boolean> {

if (userId == null) {
userId = 'Current';
}

const url = this.apiUrlBuilder.create('Security', 'Users', userId, 'Permission', {
permissionTag: permissionTag,
subjectType: subjectType,
subjectId: subjectId
});

return this.http.get(url)
.map<Response, boolean>((response: Response) => {
return <boolean>response.json();
})
.catch((error) => {
return this.errorHandlingService.ToNotification(error, this);
})
}


I don't see what I'm doing wrong, the guard is returning an observable and the console log is always returning true. Is this an issue with angular or is there a mistake in my code?










share|improve this question

























  • What do you mean by not working? Is it supposed to return false? or what?

    – Yousef khan
    Nov 14 '18 at 9:39











  • @Yousefkhan The router is redirecting to the home page, the same behaviour as if CanActivate returns false

    – Jacob Regan
    Nov 14 '18 at 9:59


















0















We have a routing guard for CanActivate that works fine when clicking between links on the site, but fails when we fully refresh the browser (i.e. it redirects to the home page, the same behaviour as if CanActivate returns false).



This is my guard



@Injectable()
export class PermissionCheckGuard implements CanActivate {
constructor(private userPermissionService: UserPermissionService) { }

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

hasPermission$.subscribe(x => {
console.log(x);
});

return hasPermission$;
}
}


This is my router config:-



path: 'security/security-example', component: SecurityExampleComponent, canActivate: [PermissionCheckGuard], data: { permissionTag: 'Site_Permission_1' }


In case it matters this is the hasPermission function



 public hasPermission(userId: string, subjectType: SubjectType, permissionTag: string, subjectId: string): Observable<boolean> {

if (userId == null) {
userId = 'Current';
}

const url = this.apiUrlBuilder.create('Security', 'Users', userId, 'Permission', {
permissionTag: permissionTag,
subjectType: subjectType,
subjectId: subjectId
});

return this.http.get(url)
.map<Response, boolean>((response: Response) => {
return <boolean>response.json();
})
.catch((error) => {
return this.errorHandlingService.ToNotification(error, this);
})
}


I don't see what I'm doing wrong, the guard is returning an observable and the console log is always returning true. Is this an issue with angular or is there a mistake in my code?










share|improve this question

























  • What do you mean by not working? Is it supposed to return false? or what?

    – Yousef khan
    Nov 14 '18 at 9:39











  • @Yousefkhan The router is redirecting to the home page, the same behaviour as if CanActivate returns false

    – Jacob Regan
    Nov 14 '18 at 9:59
















0












0








0








We have a routing guard for CanActivate that works fine when clicking between links on the site, but fails when we fully refresh the browser (i.e. it redirects to the home page, the same behaviour as if CanActivate returns false).



This is my guard



@Injectable()
export class PermissionCheckGuard implements CanActivate {
constructor(private userPermissionService: UserPermissionService) { }

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

hasPermission$.subscribe(x => {
console.log(x);
});

return hasPermission$;
}
}


This is my router config:-



path: 'security/security-example', component: SecurityExampleComponent, canActivate: [PermissionCheckGuard], data: { permissionTag: 'Site_Permission_1' }


In case it matters this is the hasPermission function



 public hasPermission(userId: string, subjectType: SubjectType, permissionTag: string, subjectId: string): Observable<boolean> {

if (userId == null) {
userId = 'Current';
}

const url = this.apiUrlBuilder.create('Security', 'Users', userId, 'Permission', {
permissionTag: permissionTag,
subjectType: subjectType,
subjectId: subjectId
});

return this.http.get(url)
.map<Response, boolean>((response: Response) => {
return <boolean>response.json();
})
.catch((error) => {
return this.errorHandlingService.ToNotification(error, this);
})
}


I don't see what I'm doing wrong, the guard is returning an observable and the console log is always returning true. Is this an issue with angular or is there a mistake in my code?










share|improve this question
















We have a routing guard for CanActivate that works fine when clicking between links on the site, but fails when we fully refresh the browser (i.e. it redirects to the home page, the same behaviour as if CanActivate returns false).



This is my guard



@Injectable()
export class PermissionCheckGuard implements CanActivate {
constructor(private userPermissionService: UserPermissionService) { }

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

hasPermission$.subscribe(x => {
console.log(x);
});

return hasPermission$;
}
}


This is my router config:-



path: 'security/security-example', component: SecurityExampleComponent, canActivate: [PermissionCheckGuard], data: { permissionTag: 'Site_Permission_1' }


In case it matters this is the hasPermission function



 public hasPermission(userId: string, subjectType: SubjectType, permissionTag: string, subjectId: string): Observable<boolean> {

if (userId == null) {
userId = 'Current';
}

const url = this.apiUrlBuilder.create('Security', 'Users', userId, 'Permission', {
permissionTag: permissionTag,
subjectType: subjectType,
subjectId: subjectId
});

return this.http.get(url)
.map<Response, boolean>((response: Response) => {
return <boolean>response.json();
})
.catch((error) => {
return this.errorHandlingService.ToNotification(error, this);
})
}


I don't see what I'm doing wrong, the guard is returning an observable and the console log is always returning true. Is this an issue with angular or is there a mistake in my code?







angular typescript angular2-routing






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 14 '18 at 10:01







Jacob Regan

















asked Nov 14 '18 at 9:23









Jacob ReganJacob Regan

327




327













  • What do you mean by not working? Is it supposed to return false? or what?

    – Yousef khan
    Nov 14 '18 at 9:39











  • @Yousefkhan The router is redirecting to the home page, the same behaviour as if CanActivate returns false

    – Jacob Regan
    Nov 14 '18 at 9:59





















  • What do you mean by not working? Is it supposed to return false? or what?

    – Yousef khan
    Nov 14 '18 at 9:39











  • @Yousefkhan The router is redirecting to the home page, the same behaviour as if CanActivate returns false

    – Jacob Regan
    Nov 14 '18 at 9:59



















What do you mean by not working? Is it supposed to return false? or what?

– Yousef khan
Nov 14 '18 at 9:39





What do you mean by not working? Is it supposed to return false? or what?

– Yousef khan
Nov 14 '18 at 9:39













@Yousefkhan The router is redirecting to the home page, the same behaviour as if CanActivate returns false

– Jacob Regan
Nov 14 '18 at 9:59







@Yousefkhan The router is redirecting to the home page, the same behaviour as if CanActivate returns false

– Jacob Regan
Nov 14 '18 at 9:59














1 Answer
1






active

oldest

votes


















0














I guess somehow it is resolved before you get response. Try using subject here.



import { Subject } from 'rxjs';

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

const subject: Subject<boolean> = new Subject();
hasPermission$.subscribe(x => {
console.log(x);
subject.next(x);
});

return subject.asObservable();
}





share|improve this answer
























  • Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

    – Jacob Regan
    Nov 14 '18 at 10:56











  • @JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

    – Yousef khan
    Nov 14 '18 at 11:00











  • Unfortunately this didn't work either, it still redirects to the home page on full reload

    – Jacob Regan
    Nov 14 '18 at 11:08











  • It will be easier to find the cause if you could add your code on stackblitz.com

    – Yousef khan
    Nov 14 '18 at 11:20











  • Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

    – Yousef khan
    Nov 14 '18 at 11:27











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296732%2fangular-canactivate-failing-on-browser-refresh-even-though-observable-returns-tr%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














I guess somehow it is resolved before you get response. Try using subject here.



import { Subject } from 'rxjs';

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

const subject: Subject<boolean> = new Subject();
hasPermission$.subscribe(x => {
console.log(x);
subject.next(x);
});

return subject.asObservable();
}





share|improve this answer
























  • Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

    – Jacob Regan
    Nov 14 '18 at 10:56











  • @JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

    – Yousef khan
    Nov 14 '18 at 11:00











  • Unfortunately this didn't work either, it still redirects to the home page on full reload

    – Jacob Regan
    Nov 14 '18 at 11:08











  • It will be easier to find the cause if you could add your code on stackblitz.com

    – Yousef khan
    Nov 14 '18 at 11:20











  • Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

    – Yousef khan
    Nov 14 '18 at 11:27
















0














I guess somehow it is resolved before you get response. Try using subject here.



import { Subject } from 'rxjs';

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

const subject: Subject<boolean> = new Subject();
hasPermission$.subscribe(x => {
console.log(x);
subject.next(x);
});

return subject.asObservable();
}





share|improve this answer
























  • Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

    – Jacob Regan
    Nov 14 '18 at 10:56











  • @JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

    – Yousef khan
    Nov 14 '18 at 11:00











  • Unfortunately this didn't work either, it still redirects to the home page on full reload

    – Jacob Regan
    Nov 14 '18 at 11:08











  • It will be easier to find the cause if you could add your code on stackblitz.com

    – Yousef khan
    Nov 14 '18 at 11:20











  • Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

    – Yousef khan
    Nov 14 '18 at 11:27














0












0








0







I guess somehow it is resolved before you get response. Try using subject here.



import { Subject } from 'rxjs';

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

const subject: Subject<boolean> = new Subject();
hasPermission$.subscribe(x => {
console.log(x);
subject.next(x);
});

return subject.asObservable();
}





share|improve this answer













I guess somehow it is resolved before you get response. Try using subject here.



import { Subject } from 'rxjs';

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {
let permissionTag = route.data["permissionTag"] as string;

let hasPermission$ = this.userPermissionService.hasPermission(null, SubjectType.Site, permissionTag, null);

const subject: Subject<boolean> = new Subject();
hasPermission$.subscribe(x => {
console.log(x);
subject.next(x);
});

return subject.asObservable();
}






share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 14 '18 at 10:40









Yousef khanYousef khan

598411




598411













  • Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

    – Jacob Regan
    Nov 14 '18 at 10:56











  • @JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

    – Yousef khan
    Nov 14 '18 at 11:00











  • Unfortunately this didn't work either, it still redirects to the home page on full reload

    – Jacob Regan
    Nov 14 '18 at 11:08











  • It will be easier to find the cause if you could add your code on stackblitz.com

    – Yousef khan
    Nov 14 '18 at 11:20











  • Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

    – Yousef khan
    Nov 14 '18 at 11:27



















  • Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

    – Jacob Regan
    Nov 14 '18 at 10:56











  • @JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

    – Yousef khan
    Nov 14 '18 at 11:00











  • Unfortunately this didn't work either, it still redirects to the home page on full reload

    – Jacob Regan
    Nov 14 '18 at 11:08











  • It will be easier to find the cause if you could add your code on stackblitz.com

    – Yousef khan
    Nov 14 '18 at 11:20











  • Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

    – Yousef khan
    Nov 14 '18 at 11:27

















Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

– Jacob Regan
Nov 14 '18 at 10:56





Thanks, I'll try this. If it is being resolved before we get a response is this a bug with angular?

– Jacob Regan
Nov 14 '18 at 10:56













@JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

– Yousef khan
Nov 14 '18 at 11:00





@JacobRegan I am not sure. It is just a guess. Got the idea from this thread. See if it helps stackoverflow.com/questions/45255745/…

– Yousef khan
Nov 14 '18 at 11:00













Unfortunately this didn't work either, it still redirects to the home page on full reload

– Jacob Regan
Nov 14 '18 at 11:08





Unfortunately this didn't work either, it still redirects to the home page on full reload

– Jacob Regan
Nov 14 '18 at 11:08













It will be easier to find the cause if you could add your code on stackblitz.com

– Yousef khan
Nov 14 '18 at 11:20





It will be easier to find the cause if you could add your code on stackblitz.com

– Yousef khan
Nov 14 '18 at 11:20













Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

– Yousef khan
Nov 14 '18 at 11:27





Can you inspect in network that how many times your hasPermission request is sent when you reload? Just change the subscribe to map

– Yousef khan
Nov 14 '18 at 11:27




















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53296732%2fangular-canactivate-failing-on-browser-refresh-even-though-observable-returns-tr%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Florida Star v. B. J. F.

Danny Elfman

Lugert, Oklahoma