redireccionar - rutas angular 6

“[RESUELTO]” Redirige al usuario con el enrutador según el estado de inicio de sesión

Question

Me gustaría llamar páginas a través de Rutas en angular 2.

En mi app.modules impoterd RouterModule y Routes, está bien aspecto:

...

import { RouterModule, Routes } from ''@angular/router'';
import { AppComponent } from ''./app.component'';
import { LoginComponent } from ''./login/login.component'';
import { DashBoardComponent} from ''./dashboard/dashboard.component'';
import { NotFoundComponent } from ''./not-found/not-found.component'';

Aquí, he creado una constante.

    const APPROUTES: Routes = [
  {path: ''home'', component: AppComponent},
  {path: ''login'', component: LoginComponent},
  {path: ''dashboard'', component: DashBoardComponent},
  {path: ''**'', component: NotFoundComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashBoardComponent
    NotFoundComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule.forRoot(),
    RouterModule.forRoot(APPROUTES)
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Tengo dos páginas inicialmente, panel de control e inicio de sesión, quiero que se cargue primero la página de inicio de sesión y una página de panel de control posterior con una condición, si no ...

En la página principal "appcomponent.ts", cómo hacer esto es condición de inicio de sesión y panel de control ex

if(loggedin){
  // page dashboard
}else{
   // page login
}

Answer 1

Aquí hay 3 formas de hacer lo que pidió, desde el menos preferido hasta el favorito:

Opción 1. Redireccionar imperativamente al usuario en AppComponent

@Component({
  selector: ''app-root'',
  template: `...`
})
export class AppComponent {
  constructor(authService: AuthService, router: Router) {
    if (authService.isLoggedIn()) {
      router.navigate([''dashboard'']);
    }
  }
}

No muy bueno. Es mejor mantener la información de "inicio de sesión requerido" en la declaración de ruta a la que pertenece.

Opción 2. Usar un guardia CanActivate

Agregue un protector CanActivate a todas las rutas que requieren que el usuario esté conectado:

const APPROUTES: Routes = [
  {path: ''home'', component: AppComponent, canActivate:[LoginActivate]},
  {path: ''dashboard'', component: DashBoardComponent, canActivate:[LoginActivate]},
  {path: ''login'', component: LoginComponent},
  {path: ''**'', component: NotFoundComponent}
];

Mi guardia se llama LoginActivate .

Para que funcione, debo agregar la protección a los providers mi módulo.

Y luego necesito implementarlo. En este ejemplo, usaré la protección para redirigir al usuario si no está conectado:

@Injectable()
export class LoginActivate implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    if (!authService.isLoggedIn()) {
      router.navigate([''login'']);
    }
    return true;
  }
}

Consulte el documento sobre guardias de ruta si esto no tiene sentido: https://angular.io/docs/ts/latest/guide/router.html#guards

Esta opción es mejor pero no super flexible. ¿Qué sucede si necesitamos verificar otras condiciones que no sean "iniciadas sesión", como los permisos de usuario? ¿Qué pasa si necesitamos pasar algún parámetro a la guardia, como el nombre de un rol "admin", "editor" ...?

Opción 3. Usar la propiedad de data ruta.

La mejor solución IMHO es agregar algunos metadatos en la declaración de rutas para indicar "esta ruta requiere que el usuario esté conectado".

Podemos usar la propiedad de data ruta para eso. Puede contener datos arbitrarios y, en este caso, elegí incluir un indicador de requiresLogin sesión que sea true o false ( false será el valor predeterminado si el indicador no está definido):

const APPROUTES: Routes = [
  {path: ''home'', component: AppComponent, data:{requiresLogin: true}},
  {path: ''dashboard'', component: DashBoardComponent, data:{requiresLogin: true}}
];

Ahora la propiedad de data en sí misma no hace nada. Pero puedo usarlo para imponer mi lógica de "inicio de sesión requerido". Para eso necesito una guarda CanActivate nuevo.

Lástima, dices. Ahora necesito agregar 2 cosas a cada ruta protegida: los metadatos Y la guardia ...

PERO:

• Puede adjuntar la protección CanActivate a una ruta de nivel superior y se ejecutará para todas sus rutas secundarias [PARA CONFIRMARSE]. De esa manera solo necesitas usar la guardia una vez. Por supuesto, solo funciona si las rutas a proteger son todas hijos de una ruta padre (no es el caso en el ejemplo de Rafael Moura).
• La propiedad de data nos permite pasar todo tipo de parámetros a la guardia, por ejemplo, el nombre de un rol o permiso específico para verificar, una cantidad de puntos o créditos que el usuario debe poseer para acceder a la página, etc.

Teniendo en cuenta estos comentarios, es mejor cambiar el nombre de la guardia a algo más genérico como AccessGuard .

Solo mostraré el código donde el guardia recupera los data adjuntos a la ruta, ya que lo que haces dentro de la guardia realmente depende de tu situación:

@Injectable()
export class AccessGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): Observable<boolean>|Promise<boolean>|boolean {
    const requiresLogin = route.data.requiresLogin || false;
    if (requiresLogin) {
      // Check that the user is logged in...
    }
  }
}

Para que se ejecute el código anterior, necesita tener una ruta similar a:

{
  path: ''home'',
  component: AppComponent,
  data: { requiresLogin: true },
  canActivate: [ AccessGuard ]
}

NÓTESE BIEN. No olvide agregar AccessGuard a los providers su módulo.