How to build / custom create No permission access Error 403 in angular 2

Question

i have been browsing the net but there isnt any useful information i can find on how to custom create custom 403 error page.

I understand and i know how to create error 404 page .

I am creating an example page for both error 404 and error 403 in the same project. For an example , i created a button and called it "home" to redirect user to home page .but if user click on home page it will return "Error 403 , Permission Denied " .

But i am unsure where i can code it . Below is the example for routing.module.ts that i have created in my project.

Do i have to code it directly below component : error404component to add my error403 component? or do i have to create a new router for error 403 page.

@NgModule({
imports: [
RouterModule.forRoot([
  {
    path: 'home',
    component: HomeComponent
  },
  {
    path: 'about',
    component: AboutComponent
  },
  {
    path: '**',
    component: Error404Component
  }
])
],
  exports: [
   RouterModule
 ] 
 })

Thanks in advance

In your example the 404 page is shown when the user accesses a route that is not defined but not for example when a request is done to an url that does not exist. How do you decide when to show the 403 response? — toskv, Dec 12 '16 at 10:00

score -2 · Answer 1 · edited May 23 '17 at 12:09

What you are looking for is state/route change listener , in Angular1 you can listen to the to and from states . similarly in angular2 you have to subscribe to the event to listen to the change of route , then you can easily figure out in the event listener that where are you heading

The sample code of my proposed solution is given in this answere

See also https://angular.io/docs/ts/latest/api/router/index/Router-class.html

How to build / custom create No permission access Error 403 in angular 2

1 Answers1