навигация маршрутизатора не работает после успешного входа - PullRequest
Новая
       13

навигация маршрутизатора не работает после успешного входа

0 голосов
/ 20 апреля 2019

угловой маршрутизатор не работает после успешного входа в систему.У меня есть модуль Auth под модулем Auth У меня есть компоненты входа

У меня есть модуль администратора под модулем администратора у меня есть 3 компонента 1) .admin компонент 2) .admin-dashboard 3) .blog компонент

В admin.component.html написан (router-outlet) тег.

// получение успешных входов и пользовательских данных

{"result": "success", "UserId": "U-001"," UserName ":" Super Admin "," UserEmail ":" admin@dw.com "}

, если результат успешен при попытке перенаправления на компонент администратора.но это не работает.

пожалуйста, проверьте код. Где я допустил ошибку?.

Заранее спасибо.

app.routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
//import { PreloadAllModules } from '@angular/router';
import { CustomPreloadingStrategyService } from './custom-preloading-strategy.service';
import { CustomPreloadingWithDealyStrategyService } from './custom-preloading-with-delay-strategy.service';

const routes: Routes = [
 {
 path:'',redirectTo:'/login',pathMatch:'full'
 },
 {
   path:'**',component:PageNotFoundComponent
 }
 ];

@NgModule({
 imports: [RouterModule.forRoot(routes,
   {
     preloadingStrategy:CustomPreloadingWithDealyStrategyService
   })],
   providers: [CustomPreloadingStrategyService,CustomPreloadingWithDealyStrategyService],
 exports: [RouterModule]
})
export class AppRoutingModule { }

app.module.ts 

import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AlertModule } from 'ngx-bootstrap';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { MatToolbarModule, MatFormFieldModule, MatDatepickerModule, MatNativeDateModule, MatInputModule  } from '@angular/material';
import { HeaderComponent } from './header/header.component';
import { AuthService } from './auth/auth.service';
import { AdminModule } from './admin/admin.module';
import { AuthModule } from './auth/auth.module';
import { httpInterceptorProviders } from './http-interceptors/index';

@NgModule({
 declarations: [
   AppComponent, 
   PageNotFoundComponent, HeaderComponent ],

 imports: [
   BrowserModule,
   DragDropModule,
   FormsModule,
   ReactiveFormsModule,
   AlertModule.forRoot(),
   BrowserAnimationsModule,
   HttpClientModule,
   MatToolbarModule, 
   MatFormFieldModule, 
   MatInputModule, 
   MatDatepickerModule, 
   MatNativeDateModule,
   AdminModule,
   AuthModule,
   AppRoutingModule],

   exports: [MatToolbarModule, MatFormFieldModule, MatInputModule, MatDatepickerModule, MatNativeDateModule,AdminModule,AuthModule],
 providers: [Title, AuthService,httpInterceptorProviders],
 bootstrap: [AppComponent]
})
export class AppModule { 
 constructor ()
 {
   console.log('App Module load');
 }
}

admin.routing.module.ts 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';
import { AuthGuard } from '../auth/auth.guard';


const routes: Routes = [
   {
   path: 'admin',
   component: AdminComponent,
   canActivate: [AuthGuard],
   children: [
     {
     path: '',
     children: [
       { path: 'blogs', component: BlogsComponent },
       { path: '', component: AdminDashboardComponent }
     ],
   }
 ]
 }
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
   providers: [],
 exports: [RouterModule]
})
export class AdminRoutingModule { }

admin.module.ts 

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule  } from '@angular/forms';
import { AdminRoutingModule } from './admin-routing.module';
import { AdminComponent } from './admin/admin.component';
import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component';
import { BlogsComponent } from './blogs/blogs.component';


@NgModule({
 declarations: [AdminComponent, AdminDashboardComponent, BlogsComponent],
 imports: [
   CommonModule,ReactiveFormsModule,AdminRoutingModule
 ]
})
export class AdminModule { }

login.component.ts 

import { Component, OnInit } from '@angular/core';
import { Route, Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { AuthService } from '../auth.service';
import { Loginuser } from './loginuser';

@Component({
 selector: 'app-login',
 templateUrl: './login.component.html',
 styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 submitted = false;
 LoginForm:FormGroup;
 SuccessAlert : string;
 WarningAlert : string;
 showSuccessAlert = false;
 showWarningAlert = false;
 isLoggedIn : boolean
 constructor(private router:Router,private fb: FormBuilder, private authservice: AuthService) 
 { 
   this.LoginForm = fb.group({
     emailid: ['', Validators.compose([Validators.required])],
     password: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(8)])],
   })
 }

 ngOnInit() {
   this.authservice.logout();
 }

 LogInUser(){
   let login = this.LoginForm.value;
   this.checklogin(login);
 }
 checklogin(loginUser: Loginuser){
   this.authservice.userlogin(loginUser).subscribe(
     data =>{
        if(data["result"]=="success"){
          this.showSuccessAlert = true;
          this.SuccessAlert = data["result"];
          this.LoginForm.reset();
          localStorage.setItem("currentUser", JSON.stringify(data));
          this.isLoggedIn = true;
          this.router.navigate(['/admin']);
        }  
        else
        {
          this.showWarningAlert = true;
          this.WarningAlert = data["result"];
        }
     }
   )
 }
}

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, CanActivateChild, CanLoad, Route, UrlSegment, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
 providedIn: 'root'
})
export class AuthGuard implements CanActivate, CanActivateChild {

 constructor(private router: Router, private authservice: AuthService){}
 canActivate(
   next: ActivatedRouteSnapshot,
   state: RouterStateSnapshot): boolean | UrlTree {
     if(this.authservice.isLoggedIn) {
       return true
     }
     else
     {
       return false
       this.router.navigate(['/login']);
     }      
 }
 canActivateChild(
   next: ActivatedRouteSnapshot,
   state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
   return this.canActivate(next, state);
 }
}

Ответы [ 2 ]

1 голос
/ 20 апреля 2019

Проблема в router.navigate , который не перенаправляет.

Проверьте следующие коды для решения вашей проблемы: 

this.router.navigate(["../admin"]);

или 

 this.router.navigateByUrl('/admin');
0 голосов
/ 22 апреля 2019

router.navigate не будет работать напрямую, потому что queryParams является Observable, поэтому вы не можете получить параметры из него таким способом.

Попробуйте это

this.router.navigate ['../ admin']

...