Angular Guard Redirect

Version imprimable

Bonjour,
Je sollicite votre aide pour une situation dont je ne comprends pas.
l'objectif est , en cas de non connection,^d' être rediriger vers la page de connection.
Pour cela, j'utilise guard.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


//const LOGIN_URL = '/auth/login';
const LOGIN_URL = '/login';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationGuard implements CanActivate {
  constructor(private router: Router, private credentialsService: CredentialsService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.credentialsService.isAuthenticated()) {
      return true;
    }

    log.debug('Not authenticated, redirecting and adding redirect url...');
    console.log('before goiing to login form');
    this.router.navigate([LOGIN_URL], { queryParams: { redirect: state.url }, replaceUrl: true });
    console.log('after goiing to login form');
    return false;
  }
}

Guard Module

Code:

1
2
3
4
5
6
7
 
import { AuthRoutingModule } from './auth-routing.module'; 
 
@NgModule({
  imports: [AuthRoutingModule ], 
})
export class AuthModule {}

Routing

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
const routes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    canActivate: [AuthenticationGuard],
    //canActivate: [AuthGuard],
    //canActivateChild: [AuthGuard],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent, data: { title: 'Home', titleI18n: 'Home' }, },
    ],
  },
  {
    //path: 'auth',
    path: 'login',
    component: AuthLayoutComponent,
    children: [
      { path: 'login', redirectTo: '/signin', pathMatch: 'full' },
      { path: 'signin', component: SigninComponent, data: { title: 'Login', titleI18n: 'login' } },
    ],
  },
  { path: '**', redirectTo: '' },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [],
})
export class RoutesRoutingModule { }

Routing Module

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
import { NgModule } from '@angular/core';
import { SharedModule } from '../@shared';
import { RoutesRoutingModule } from './routes-routing.module';
 
import { HomeComponent } from '../modules/home/home.component';
import { SigninComponent } from '../modules/signin/signin.component';
//import { RegisterComponent } from '../modules/register/register.component';
 
//const COMPONENTS = [HomeComponent,SigninComponent,]; // RegisterComponent];
const COMPONENTS = [];
const COMPONENTS_DYNAMIC = [];
 
@NgModule({
  imports: [SharedModule, RoutesRoutingModule],
  declarations: [...COMPONENTS, ...COMPONENTS_DYNAMIC],
  //exports: [RoutesRoutingModule] 25/08/2020
  //entryComponents: COMPONENTS_DYNAMIC,
})
export class RoutesModule {}

App Module

Code:

1
2
3
4
5
6
7
8
9
10
11
 
import { RoutesModule } from './routes/routes.module';
 
 
@NgModule({
  declarations: [AppComponent],
  imports: [
    RoutesModule,
  ],
})
export class AppModule {}

{QUOTE]
a l'execution, j'ai une page blanche avec dans la console les messages
Not authenticated, redirecting and adding redirect url...
before goiing to login form
after goiing to login form
[/QUOTE]

cela voudrait dire que le guard s'execute mais à la ligne ne fait peute rien ou ne trouve pas url

Code:

1
2
3
 
const LOGIN_URL = '/login';
this.router.navigate([LOGIN_URL], { queryParams: { redirect: state.url }, replaceUrl: true });

26/08/2020, 14h07
dukoid

c'est assez simple:
il faut utiliser: canActivate sur toutes les routes qui doivent être authentifié pour y accéder

exemple:

Code:

{ path: 'forums/:forum_alias/post', component: PostComponent, canActivate: [AuthGuardService] },

et écrire le code de la classe: AuthGuardService

http://gnomeontherun.com/2017/03/02/...ts-in-angular/

c'est ce qui est fait voir en gras

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const routes: Routes = [
  {
    path: '',
    component: AdminLayoutComponent,
    canActivate: [AuthenticationGuard],
    //canActivate: [AuthGuard],
    //canActivateChild: [AuthGuard],
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent, data: { title: 'Home', titleI18n: 'Home' }, },
    ],
  },
  {
    //path: 'auth',
    path: 'login',
    component: AuthLayoutComponent,
    children: [
      { path: 'login', redirectTo: '/signin', pathMatch: 'full' },
      { path: 'signin', component: SigninComponent, data: { title: 'Login', titleI18n: 'login' } },
    ],
  },
  { path: '**', redirectTo: '' },
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [],
})
export class RoutesRoutingModule { }

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
import { Logger } from '../../@core';
import { CredentialsService } from '@core/services/credentials.service';
 
const log = new Logger('AuthenticationGuard');
//const LOGIN_URL = '/auth/login';
const LOGIN_URL = '/login';
 
@Injectable({
  providedIn: 'root',
})
export class AuthenticationGuard implements CanActivate {
  constructor(private router: Router, private credentialsService: CredentialsService) {log.debug(' auth gaurd call...');}
 
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.credentialsService.isAuthenticated()) {
      return true;
    }
 
    log.debug('Not authenticated, redirecting and adding redirect url...');
    console.log('before goiing to login form');
    this.router.navigate([LOGIN_URL], { queryParams: { redirect: state.url }, replaceUrl: true });
    console.log('after goiing to login form');
    return false;
  }
}
 
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 
import { Logger } from '../../@core';
import { CredentialsService } from '@core/services/credentials.service';
 
const log = new Logger('AuthenticationGuard');
//const LOGIN_URL = '/auth/login';
const LOGIN_URL = '/login';
 
@Injectable({
  providedIn: 'root',
})
export class AuthenticationGuard implements CanActivate {
  constructor(private router: Router, private credentialsService: CredentialsService) {log.debug(' auth gaurd call...');}
 
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.credentialsService.isAuthenticated()) {
      return true;
    }
 
    log.debug('Not authenticated, redirecting and adding redirect url...');
    console.log('before goiing to login form');
    this.router.navigate([LOGIN_URL], { queryParams: { redirect: state.url }, replaceUrl: true });
    console.log('after goiing to login form'  + LOGIN_URL);
    return false;
  }
}
 
}

ça donne quoi ? console.log('after goiing to login form' + LOGIN_URL);

26/08/2020, 14h43
yLaplace

console

HMR] Waiting for update signal from WDS...
logger.service.ts:107 [App] init
logger.service.ts:107 [I18nService] Language set to fr-FR
core.js:26832 Angular is running in development mode. Call enableProdMode() to enable production mode.
logger.service.ts:107 [AuthenticationGuard] auth gaurd call...
logger.service.ts:107 [AuthenticationGuard] Not authenticated, redirecting and adding redirect url...
auth.guard.ts:23 before going to login form
auth.guard.ts:25 after going to login form /login
client:48 [WDS] Hot Module Replacement enabled.
client:52 [WDS] Live Reloading enabled.
26/08/2020, 16h09
dukoid

sur le navigateur
....../login

tu tombes bien sur la page login ?
26/08/2020, 16h16
yLaplace

voici l'url du navigateur

Citation:

http://localhost:4400/login?redirect=%2Fhome

et j'ai une page blanche

en modifiant la route par ceci, la page s'affiche

Code:

1
2
3
4
5
6
7
8
9
 {
    //path: 'auth',
    path: 'login',
    component: AuthLayoutComponent,
    children: [
      { path: '', component: SigninComponent, data: { title: 'Login', titleI18n: 'login' } },
      { path: 'signin', component: SigninComponent, data: { title: 'Login', titleI18n: 'login' } },
    ],
  },

Mon objectif final c'est

Code:

1
2
3
4
5
6
7
8
 {
    path: 'auth',
    component: AuthLayoutComponent,
    children: [
      { path: 'login', component: SigninComponent, data: { title: 'Login', titleI18n: 'login' } },
      { path: 'signin', component: SigninComponent, data: { title: 'Login', titleI18n: 'login' } },
    ],
  },

alord comment definir l'url dans le service guard

Code:

1
2
3
4
5
 
//const LOGIN_URL = '/auth/login';
const LOGIN_URL = '/login';
 
this.router.navigate([LOGIN_URL], { queryParams: { redirect: state.url }, replaceUrl: true });

heuuu

Code:

1
2
3
4
5
 
const LOGIN_URL = '/auth/login';
//const LOGIN_URL = '/login';
 
this.router.navigate([LOGIN_URL], { queryParams: { redirect: state.url }, replaceUrl: true });

teste:
http://localhost:4400/auth/login

26/08/2020, 16h47
yLaplace

ok ça march, merci bien