Angular2 retrieve the current route object similar to ng-route's toState parameter

Question

Angular2 retrieve the current route object similar to ng-route's toState parameter

@RouteConfig([
{
    path: '/login',
    name: 'Login',
    component: LoginComponent
},
{
    path: '/search',
    name: 'Search',
    component: SearchComponent,
    needAuth: true
},
{
    path: '/result/:searchString',
    name: 'Result',
    component: ResultComponent,
    needAuth: true
},
{path: '/**', redirectTo: ['Login']}
])

I have defined a configuration like the one above. Now I am trying to figure out how to identify the current route object, specifically for routes that require authentication before access.

{
    path: '/result/:searchString',
    name: 'Result',
    component: ResultComponent,
    needAuth: true
}

My goal is to create functionality in my app where if a user is not logged in and the current route object has the needAuth property set to true, they will be redirected to the login page; otherwise, they should be directed to the search page.

After some research, I came across this solution:

        this._router.subscribe((url) => {
        this._router.recognize(url).then((instruction) => {
            if(this._authService.getUser() == null && instruction.component.routeData.data.needAuth) {
                this._router.navigate(['Login'])
            }

            if(this._authService.getUser() !=null && !instruction.component.routeData.data.needAuth) {
                this._router.navigate(['Search'])
            }
        });
    });

angularjs typescript

Answer 1

Answer №1

To enhance the functionality of the RouterOutlet class and intercept route activation on a global scale, consider extending it as follows:

import {Directive} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';

@Directive({
  selector: 'router-outlet'
})

export class MyCustomRouterOutlet extends RouterOutlet {
  (...)

  activate(oldInstruction: ComponentInstruction) {
    var url = this.parentRouter.lastNavigationAttempt;
    console.log('Attempting to navigate');
    if (oldInstruction.routeData.needAuth && !this.authService.loggedIn){
      var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1);
      return super.activate(newInstruction);
    } else {
      return super.activate(oldInstruction);
    }
  }
}

Remember to define your routes like this:

{
  path: '/result/:searchString',
  name: 'Result',
  component: ResultComponent,
  data: {
    needAuth: true
  }
}

For further information, refer to these resources:

Answer 2

To enhance the functionality of the RouterOutlet class and intercept route activation on a global scale, consider extending it as follows:

import {Directive} from 'angular2/core';
import {Router, RouterOutlet, ComponentInstruction} from 'angular2/router';

@Directive({
  selector: 'router-outlet'
})

export class MyCustomRouterOutlet extends RouterOutlet {
  (...)

  activate(oldInstruction: ComponentInstruction) {
    var url = this.parentRouter.lastNavigationAttempt;
    console.log('Attempting to navigate');
    if (oldInstruction.routeData.needAuth && !this.authService.loggedIn){
      var newInstruction = new ComponentInstruction('Login', [], new RouteData(), Login, false, 1);
      return super.activate(newInstruction);
    } else {
      return super.activate(oldInstruction);
    }
  }
}

Remember to define your routes like this:

{
  path: '/result/:searchString',
  name: 'Result',
  component: ResultComponent,
  data: {
    needAuth: true
  }
}

For further information, refer to these resources:

Answer 3

Answer №2

Instead of using the property

needAuthorization: true

within the RouteConfig, opt for

data: {needAuthorization: true}

and then inject it as follows

constructor(private routeData: RouteData) {
  if(routeData.needAuthorization) {
    ...
  }
}

Answer 4

Instead of using the property

needAuthorization: true

within the RouteConfig, opt for

data: {needAuthorization: true}

and then inject it as follows

constructor(private routeData: RouteData) {
  if(routeData.needAuthorization) {
    ...
  }
}

Angular2 retrieve the current route object similar to ng-route's toState parameter

Answer №1

Answer №2

Similar questions

Utilizing the MapToIterable Angular Pipe with TypeScript

Inspecting a union type with a TypeScript property validation

Does the directive lack access to transcluded elements?

Transferring documents from an angular ionic application to a slim php framework on the localhost

Guide on how to address the problem of the @tawk.to/tawk-messenger-react module's absence of TypeScript definitions

md-autocomplete not displaying the item that was selected

flexanimate functioning only on the first attempt

How can I store an array of objects in a Couchbase database for a specific item without compromising the existing data?

Secure User Verification in Laravel 5 and AngularJs sans the need for JWT Tokens

Using the attribute data-ng-repeat along with the <option> tag allows for dynamic iteration and

Angular Mat AutoSuggest - Improving User Experience

Harness the Power of Generics in TypeScript for Automatic Type Inference

Unlock the power of deep linking with the Branch SDK and integrate seamlessly with

Whenever attempting to execute a protractor test using cucumber, a specific error message is displayed reading: "E/launcher - Process exited with error code 1"

Creating nested routes with parameters in NestJS is a powerful feature that allows for dynamic routing

How can I determine the data type of an Array element contained within an Interface member?

The absence of definition for onSubmit is causing an issue in Angular 6

"HTML glitches in Onsen 2: A Dynamic Dilemma

Crafting a nested path type in Typescript

Best practice for integrating Typescript into an established ASP.NET 4 Webforms project