How to add token parameter to angular route?

Question

I have Angular-12 frontend and Laravel-8 backend project for user registration confirmation with token.

From the api backend, I route into the Angular frontend this way for user activation through email:

->action('Confirm Account', url('https://myapp/auth/signup/activate?token='.$notifiable->activation_token))

But my Angular app-routing module has:

app-routing:

const routes: Routes = [
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', loadChildren: () => import('./features/landings/landings.module').then(m => m.LandingsModule)},
  {path: 'auth', loadChildren: () => import('./features/auth/auth.module').then(m => m.AuthModule)},
];

auth-routing-module:

const routes: Routes = [
  {path: '',
  component: LoginComponent,
  children: [
  {
    path: '',
    component: AuthComponent
  },
  {
    path: 'signup/activate',
    component: SignupConfirmComponent
}
]}];

But whenever the user clicks on the notification sent to the email:

https://myapp/auth/signup/activate?token=8774945

I got this error from the frontend:

404 Not Found

What else do I need to do?

Nathaniel Johnson · Accepted Answer · 2021-07-05T16:56:44.993

0

Your routes need to look like this:

const routes: Routes = [
  {path: '',
  component: LoginComponent,
  children: [
  {
    path: '',
    component: AuthComponent
  },
  {
    path: 'signup/activate/:id',
    component: SignupConfirmComponent
}
]}];

Note the path: 'signup/activate/:id' line

Then make the link look like this: https://myapp/auth/signup/activate/8774945

In your router code you will have something like this:

export class SignupConfirmComponent implements OnInit {
  id: string
  constructor(private route: ActivatedRoute) {}
  ngOnInit(): void {
    this.id = this.route.snapshot.paramMap.get('id')
  }
}

You can find a more detailed explanation of how routes with parameters are used in the Angular tutorial

Your backend PHP code should probably look like this. Disclaimer: I am not a PHP programmer.

->action('Confirm Account', url('https://myapp/auth/signup/activate/'.$notifiable->activation_token))

edited Jul 05 '21 at 16:56

answered Jul 05 '21 at 15:56

Nathaniel Johnson

4,731
1
42
69

Sorry about this question. How do I re-write the route that goes to the email from the backend api: ->action('Confirm Account', url('https://myapp/auth/signup/activate?token='.$notifiable->activation_token)) – user11352561 Jul 05 '21 at 16:15
I do not know PHP so I added a guess based on what you put up that will probably work. – Nathaniel Johnson Jul 05 '21 at 16:20
I got this error Type 'string | null' is not assignable to type 'string'. Type 'null' is not assignable to type 'string'. in this.id = this.route.snapshot.paramMap.get('id') and this.id is highlighted – user11352561 Jul 05 '21 at 16:56
You are probably not including the token in the url. You can make the parameter optional as in https://stackoverflow.com/questions/34208745/angular-2-optional-route-parameter – Nathaniel Johnson Jul 05 '21 at 16:58

How to add token parameter to angular route?

1 Answers1