Angular路由时登录后仍停留在当前页面的问题求助

以下是针对你遇到的登录后跳转仍停留在登录页问题的排查和解决步骤：

1. 阻止表单默认提交行为 #

如果你的登录按钮放在<form>标签内且类型为submit，浏览器会触发默认表单提交并刷新页面，直接中断Angular的路由跳转。两种解决方式：

• 修改按钮类型：将模板中的登录按钮类型改为button

  <button type="button" (click)="onCheckCredentail(userNameInput, passwordInput)">登录</button>
  

• 阻止默认事件：若必须用submit类型，在方法中接收事件参数并阻止默认行为

  onCheckCredentail(event: Event, userName: HTMLInputElement, password: HTMLInputElement) {
    event.preventDefault(); // 阻止表单默认提交刷新
    if (userName.value==='Balveer' && password.value==='Balveer123' ) {
      this.isLogin=true;
      this.router.navigateByUrl('/todos');
    } else {
      this.enterUserName="incorect password and username ";
      this.isLogin=false;
    }
  }
  

  模板对应调整为：

  <form (submit)="onCheckCredentail($event, userNameInput, passwordInput)">
    <!-- 表单输入框 -->
    <button type="submit">登录</button>
  </form>
  

2. 检查路由配置正确性 #

确认app-routing.module.ts中已正确配置/todos路由，且无错误重定向或拦截：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { TodosComponent } from './todos/todos.component';

const routes: Routes = [
  { path: '', redirectTo: '/login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'todos', component: TodosComponent }, // 确保此配置存在且路径正确
  { path: '**', redirectTo: '/login' }
];

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

若/todos路由配置了AuthGuard，需确保守卫逻辑正确识别已登录状态，不会误将已登录用户拦截回登录页。

3. 全局存储登录状态（适配路由守卫） #

你当前的isLogin是组件内变量，路由守卫无法读取该状态。若使用守卫保护todos页面，需将登录状态存入全局服务：

• 创建AuthService：

  import { Injectable } from '@angular/core';
  
  @Injectable({ providedIn: 'root' })
  export class AuthService {
    private isLoggedIn = false;
  
    login() {
      this.isLoggedIn = true;
    }
  
    isAuthenticated(): boolean {
      return this.isLoggedIn;
    }
  }
  

• 修改LoginComponent：

  import { Component } from '@angular/core';
  import { Router } from '@angular/router';
  import { AuthService } from './auth.service';
  
  @Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
  })
  export class LoginComponent {
    constructor(private router: Router, private authService: AuthService) {}
  
    enterUserName='';
    enterPassword='';
  
    onCheckCredentail(userName: HTMLInputElement, password: HTMLInputElement) {
      if (userName.value==='Balveer' && password.value==='Balveer123' ) {
        this.authService.login(); // 全局存储登录状态
        this.router.navigateByUrl('/todos');
      } else {
        this.enterUserName="incorect password and username ";
      }
    }
  }
  

• 路由守卫示例（若使用）：

  import { Injectable } from '@angular/core';
  import { CanActivate, Router } from '@angular/router';
  import { AuthService } from './auth.service';
  
  @Injectable({ providedIn: 'root' })
  export class AuthGuard implements CanActivate {
    constructor(private authService: AuthService, private router: Router) {}
  
    canActivate(): boolean {
      if (this.authService.isAuthenticated()) {
        return true;
      } else {
        this.router.navigate(['/login']);
        return false;
      }
    }
  }
  

  并在路由配置中添加守卫：

  { path: 'todos', component: TodosComponent, canActivate: [AuthGuard] },
  

4. 修正代码拼写错误 #

建议将方法名onCheckCredentail改为onCheckCredential，避免后续维护时的混淆。

内容的提问来源于stack exchange，提问作者Balbir singh