Check angular route path from interceptor

angular http interceptor for specific url
angular interceptor
angular http interceptor redirect
angular interceptor router navigate
pass parameter to interceptor angular
angular interceptor modify request body
angular routing
angular get current route

I have a route path configured as:

{
    path: 'user/:id/edit/:type',
    component: UserEditTypeComponent,
},

I want to reach the path from the interceptor which i could access from activated routes as:

constructor(private activatedRoute: ActivatedRoute) {
}

ngOnInit() {
    console.log(this.activatedRoute.routeConfig.path);
}

This results in returning this path user/:id/edit/:type in the console.

I want to get the same path from interceptor which i have tried as:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let ar = this.injector.get(ActivatedRoute);
    console.log(ar.routeConfig.path);
}

this returns error as: Cannot read property 'path' of null. I have removed the path and tested and found routeConfig to be null.

How do we get the activated route inside the interceptor?

Is there any other method to access the path in interceptor?

If the question seems to be unclear could updated it with more information.

I know this is a little late.. but following will resolve your problem, had similar concerns..

constructor(private activatedRoute: ActivatedRoute) {
    console.log(activatedRoute.snapshot['_routerState'].url);
} 

activatedRoute.snapshot['_routerState'].url will contain your '/user/:id/edit/:type'.

Cheers (y)

router.navigate() not working inside HttpInterceptor while route , router.navigate() not working inside HttpInterceptor while route resolver is running { path: ':id', component: EditComponent, resolve: { user: UserResolver } } angular-automatic-lock-bot bot locked and limited conversation to  .filter(route => route.outlet === 'primary') // Get the value of all the BehaviorSubject observables in the route so that // the values can be directly accessed from the route like 'route.data.foo' // instead of having to subscribe to the observable at the 'iteratee' callback // level and receive the data that way.

If in the interceptor the activated route and the snapshot aren't loaded with the current path or url, as a last choice, you could use the classic window.location

3 ways to use Angular HTTP Interceptors - BrieBug Blog, HTTP Interceptors provide a flexible mechanism to control your application a good idea to check for an HttpResponse before acting on the response event. When an application needs to restrict access to certain routes, an  Interceptors are part of Angular's HttpClient module, which was introduced with Angular 4.3. If this is new to you, you can get an overview here. Service. We’ll be using a simple service that gets Posts from a REST API.

The best way to do this is to do it through the router object:

constructor(private router: Router) {
    console.log(this.router.routerState.snapshot);
} 

This way you don't have to access hidden properties.

Top 10 ways to use Interceptors in Angular, This is done by checking the path. If it is not the request we are looking for, we can pass it on to the next interceptor with next.handle(req). In this post, we will see how to achieve client-side caching in Angular 8 application using HTTP Interceptor. We will create an ASP.NET Core 3.0 application with SQL server as backend to save and retrieve the employee data.

Angular Get Current Route using the Location Service, In this tutorial we examine ways to obtain the current URL route using the location If you want to check out the official documentation for Angular 2 Location assign a string variable to our current path every time a route change is observed. Learn everything about the new Http client introduced in Angular 4.3 and now default in Angular 5 in my latest Egghead.io video course on “Learn HTTP in Angular”.. In the following Egghead.io video lesson I implement an HTTP interceptor which intercepts the request, adding some headers, the response as well as potential HTTP errors.

ActivatedRouteSnapshot, Contains the information about a route associated with a component loaded in an outlet at a The path from the root of the router state tree to this route. Routes and Paths. In Angular, a route is an object (instance of Route) that provides information about which component maps to a specific path. A path is the fragment of a URL that determines where exactly is located the resource (or page) you want to access. You can get the path by taking off the domain name from the URL.

In-app navigation: routing to views, The first property, path , defines the URL path for the route. The second property, component , defines the component Angular should use for the corresponding  constructor(private router: Router, private activatedRoute: ActivatedRoute){ // string path from root to current route. i.e /Root/CurrentRoute router.url // just the fragment of the current route. i.e. CurrentRoute activatedRoute.url.value[0].path // same as above with urlSegment[] activatedRoute.url.subscribe((url: urlSegment[])=> console.log

Comments
  • What is wrong with your first example using the ActivatedRoute ?
  • @Orodan There is nothing wrong in that example. The example is inside the component and i have a condition where i need to check the component's path in interceptor which is not working as expected.
  • you can even take a constructor in interceptor
  • Have you tried getting the ActivatedRoute via constructor injection in the interceptor? Just like you are in the component.
  • check this link