Question

成功登录后，角路由器不工作。我有验证模块在“身份验证”模块下，我具有登录组件

我有管理模块在管理模块下，我有3个组成部分 1）.admin组件 2）.admin控制台 3）.blog组件

在admin.component.html中书面（路由器出口）标签。

//获取登录成功和用户数据

{“结果”：“成功”，“用户ID”：“ U-001”，“用户名”：“超级管理员”，“用户电子邮件”：“ 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);
 }
}

Answer 1

问题是 router.navigate 无法重定向。

测试以下代码以解决您的问题：

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

或

 this.router.navigateByUrl('/admin');

Answer 2

router.navigate将无法直接运行，因为queryParams是可观察的，因此您无法以这种方式从中获取参数。

尝试一下

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

Answer 3

这对我有用。

import { Location } from '@angular/common';
import { Router } from '@angular/router';

this.location.replaceState('/');
this.router.navigate(['home']);

this.location.replaceState

取代历史记录而不是推送历史记录，因此如果用户返回，则不会返回到用户所在的URL，而是以前的URL。

登录成功后路由器导航不起作用

3 个答案: