Skip to content

Render 404 page with CanActivate guard without aborting navigation #17004

@simon-xiong-ca

Description

@simon-xiong-ca

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Background
When a user navigates to a route that requires authentication and they are not authenticated, there's no way to use a CanActivate guard to render a 404 component and still update the url to what the user was trying to access.

Current behavior
Let's say a user navigates to /protected and is not authenticated. Currently, in the CanActivate guard, in order to render my 404 component, I would use router.navigate(['404'], { skipLocationChange: true }); return false;. However, after rendering the 404 component, the url in the address bar is the previous url before the navigation since the navigation was aborted.

Expected behavior
In CanActivate guard, there should be a way to render the 404 route while still updating the url in the address bar to /protected.

Minimal reproduction of the problem with instructions

@Injectable()
export class LoggedInGuard implements CanActivate {
  constructor(private router: Router, private userService: UserService) {}

  canActivate() {
    if (this.userService.isLoggedIn) return true;

    this.router.navigate(['/404'], { skipLocationChange: true });
    return false;
  }
}

This code will render a 404 page, but not update the url. I would like it to render 404 and update the url in the address bar to what the user was trying to access.

What is the motivation / use case for changing the behavior?
Github does this, for example, if you go to https://github.com/simonxca/webpack-guide, it will render a 404 page even though the repo exists because you're not authenticated. The motivation is to prevent users from being able to distinguish between a protected from a non-existent page for security.

Please tell us about your environment:
Mac OSX Sierra, Node 6.10.3

  • Angular version: 4.1.X

  • Browser: all

  • Language: all

Metadata

Metadata

Assignees

Labels

area: routerfeatureIssue that requests a new featurefeature: under considerationFeature request for which voting has completed and the request is now under considerationfreq3: high

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions