when navigating, the component is not the same after canActivate

0
votes

I am experiencing some weird problem with angular_router.

My AdminComponent has a canActivate test where it checks if the user is logged in. If not, it redirects to the login page. Besides that, the admin template has a *ngIf="isAllowed" (which is set at canActivate) to prevent the subcomponents to be created before this check.

The problem is when the user is in a page that has the admin as parent, is logged and tries to navigate to another page that is also a child of the admin component.

For example, the current admin component has hashCode 123 and the user is logged in. Everything is fine. The canActivate works and in the console we can see the hashCode 123 when the isAllowed is set to true. In the template of the admin component it is also printing the 123 hashCode. So far so good.

Then we try to navigate to another page that has admin component as parent. The canACtivate is called and it prints the hashCode 123, allowing the user to see the page.
There is where the problem happens. CanActivate allows the user because the token is valid, but the hashCode that is printed within admin template is not the same. The result is that the user is ok by CanActivate but the template is not ok because isAllowed is false.

If I refresh the page with the new URL, everything works fine. The problem is with navigation.

You can see in the image that the canActivate hashCode is different from the hashCode the template is showing and they should be the same object.

Dart VM version: 2.0.0-dev.62.0 (Wed Jun 13 16:50:22 2018 +0200) on "macos_x64"
angular_router 2.0.0-alpha+14
angular 5.0.0-alpha+15

hash not the same

1
dartangular-dartangular-dart-routing
Does your AdminLayoutComponent extend CanReuse? If not a new instance will be created after navigation is permitted. – Leon Senft
it worked. However, I don't know if the flow is correct. I guess the router should not use the old object's canActivate and then attach another component to the view. – Jonathan
Yes, this is a well understood shortcoming of the router's design. This issue documents it in detail github.com/dart-lang/angular/issues/733. – Leon Senft
you can answer the post and I set it as correct answer – Jonathan

1 Answers

1
votes

The AdminComponent must extend or implement CanReuse to allow reuse of the same instance between navigation of its children.