javascript - Angular: Setup routes depending on service method call - Stack Overflow

admin管理员组

文章数量:1384770

I have route configuration set up via @NgModule. And I have a service that identifies what parts of the application should be shown for the user depending on certain conditions. I need to call that service and setup the routes according to the returned value.

Problem: Route configuration is setup inside an annotation and I can't get how to call the service in such setup.

To be more specific here is the example configuration I want to enhance.

My current routing setup:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'first-route',
        pathMatch: 'full'
    },
    {
        path: 'first-route',
        ponent: FirstComponent,
        pathMatch: 'full'
    },
    {
        path: 'second-route',
        ponent: SecondComponent,
        pathMatch: 'full'
    },
    ...
];

@NgModule({
    imports: [RouterModule.forChild(appRoutes)],
    exports: [RouterModule]
})
export class MyRoutingModule {
}

The service that should change the route setup:

@Injectable()
export class MyService {
    getAccessibleRoutes(): Observable<string[]> {...}
}

Question: How can I make a service call and change the routes?

Note: I also looked on "Dynamically adding routes in Angular" and "How we can add new routes dynamically into RouterModule(@NgModule imports)" but I haven't found clear answer there.

I have route configuration set up via @NgModule. And I have a service that identifies what parts of the application should be shown for the user depending on certain conditions. I need to call that service and setup the routes according to the returned value.

Problem: Route configuration is setup inside an annotation and I can't get how to call the service in such setup.

To be more specific here is the example configuration I want to enhance.

My current routing setup:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'first-route',
        pathMatch: 'full'
    },
    {
        path: 'first-route',
        ponent: FirstComponent,
        pathMatch: 'full'
    },
    {
        path: 'second-route',
        ponent: SecondComponent,
        pathMatch: 'full'
    },
    ...
];

@NgModule({
    imports: [RouterModule.forChild(appRoutes)],
    exports: [RouterModule]
})
export class MyRoutingModule {
}

The service that should change the route setup:

@Injectable()
export class MyService {
    getAccessibleRoutes(): Observable<string[]> {...}
}

Question: How can I make a service call and change the routes?

Note: I also looked on "Dynamically adding routes in Angular" and "How we can add new routes dynamically into RouterModule(@NgModule imports)" but I haven't found clear answer there.

• javascript
• angular
• typescript
• angular-ui-router
• url-routing

Share Improve this question Follow asked Dec 13, 2017 at 13:05 Sasha ShpotaSasha Shpota 10.3k1515 gold badges9393 silver badges177177 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

If I correctly understood your problem, I think you probably can consider using route guards to reach you goal. I suggest you to use guards feature to specify the conditions of accessing your routes, instead of changing the list of routes.

Please check this link for more information about route guards:

https://codecraft.tv/courses/angular/routing/router-guards/

I hope this will help you.

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { YourSecurityService } from './your-security.service';

@Injectable()
export class YourRouteGuardService implements CanActivate {

    constructor(
        private router: Router, 
        private yourSecurityService: YourSecurityService) {
    }

    canActivate(
        route: ActivatedRouteSnapshot, 
        state: RouterStateSnapshot): boolean {

        console.log(state.url); // HERE YOU CAN GET REQUESTED ROUTE

        if (this.yourSecurityService.checkIfUserHaveAccess())
            return true;

        this.router.navigate(['your-route-to-redirect']);
        return false;
    }
 }

Next you should apply your guard to your route:

const appRoutes: Routes = [
    {
        path: 'someroute',
        ponent: RouteComponent,
        canActivate: [YourRouteGuardService]
    },
    ...
]

本文标签： javascriptAngular Setup routes depending on service method callStack Overflow