7 - 8 dynamic routes

Question

I have an Angular app which should be able to create new routes depending on users. Let's say user 'johndoe' registers, then the app should create a route: domain/johndoe.

Of course the /johndoe route should be provided with some info concerning the particular user ( like name, image etc.).

I am using Google Cloud Hosting and Firestore as back-end solutions, and my progress so far was to inject the Router into my AppComponent constructor and then use the unshift function on the router.config. That kind of works, but I would have to store all the new routes ('users') into my database in a separate file, and then query the database every time someone navigates to a private rote ( e.g. domain/johndoe).

Is there a beautiful and easier to maintain solution, which takes into account my back-end configuration?

Solution

You can pass userName as a route parameter. In routes array

{ path: 'domain/:username', component: UserDetailsComponent }

in HTML:

<a [routerLink]="['/domain', usernameVar]">

When someone clicks on the link, it will route to UserDetailsComponent. In the component, the username can be read.

username: string;
constructor(private route: ActivatedRoute) {}

ngOnInit() {
    this.route.params.subscribe((params: Params) => {
        this.username = params.username; // same as :username in route
    });
    // using username call the BE api and fetch data
}

for more on route parameters, go to https://angular.io/guide/router#route-parameters

In case you want to route to the page based on authorization, use authGuards. https://angular.io/guide/router#canactivate-requiring-authentication

Comments

[Frank Adrian]

I think you would be better of creating a dynamic route like domain/:username and have a component which fetches your data from firebase and renders it. Learn more here: angular.io/guide/router

[Mihaylov]

Would this allow a user to navigate to domain/johndoe ?

[Frank Adrian]

if your users are logged in, yes. you can show a link using routerLink with a dynamic parameter.

[Mihaylov]

If you read my question again , you would notice that I would want to create routing , which would be global , to say so . So in case a user in America registers as 'Lincoln' , immedaitely after a annonumous user in Europe would be able to navigate to 'domain/lincoln' . I know that is not achieveable throug only the front-end . that is why I have stated what backend I am using

[Frank Adrian]

You can protect your domain/lincoln route by an AuthGuard which relys on data from your backend. But are your users logged on? Its a bit hard for me to understand what you are trying to achive.

[Mihaylov]

I did not want to use routerLink , but to generate dynamically routes for the application , which would be accessible over it instances.

[LALIT KANTA DIBYADARSHAN]

How are you planning to trigger the route, programmatically or by events?

[Mihaylov]

To be honest your solution worked perfect ! Now I realized that using domain/:parameter could actually work perfect , then I just need to check in the database if such a user exists and fetch the data or navigate to a 404 page , using a route guard . Thanks