当我导航到 URL“http://localhost:4200/”时，它会将我重定向回来

Question

login.components.ts: 

import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
import {AuthService} from "../../service/auth.service";
import {TokenStorageService} from "../../service/token-storage.service";
import {Router, RouterLink} from "@angular/router";
import {NotificationService} from "../../service/notification.service";
import {error} from "@angular/compiler-cli/src/transformers/util";
import {MatFormField, MatLabel} from "@angular/material/form-field";
import {MatInput} from "@angular/material/input";
import {MatButton} from "@angular/material/button";

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    MatFormField,
    MatLabel,
    MatInput,
    MatButton,
    RouterLink
  ],
  templateUrl: './login.component.html',
  styleUrl: './login.component.css'
})
export class LoginComponent implements OnInit{
  constructor(
    public loginForm: FormGroup,

    private authService: AuthService,
    private tokenStorage: TokenStorageService,
    private notificationService: NotificationService,
    private router: Router,
    private fb: FormBuilder
  )
  {
    if(this.tokenStorage.getUser()) {
      this.router.navigate(['main'])
    }
  }

  ngOnInit(): void {
    this.loginForm = this.createLoginForm();
  }

  createLoginForm(): FormGroup{
    return this.fb.group({
      username: ['', Validators.compose([Validators.required])],
      password: ['', Validators.compose([Validators.required])]
      }
    )
  }

  submit(): void {
    this.authService.login({
      username: this.loginForm.value.username,
      password: this.loginForm.value.password
    }).subscribe(data => {
      console.log(data);

      this.tokenStorage.saveToken(data.token);
      this.tokenStorage.saveUser(data.user);
      this.notificationService.showSnackBar("Successfully logged in")
      this.router.navigate(['/']);
      window.location.reload();
    }, error => {
      console.log(error);
      this.notificationService.showSnackBar(error.message);
    })
   }
}

app.component.ts:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {MaterialModule} from "./material-module";
import {HttpClientModule} from "@angular/common/http";
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import {authInterceptorProviders} from "./helper/auth-interceptor.service";
import {authErrorInterceptorProvider} from "./helper/error-interceptor.service";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MaterialModule, HttpClientModule, FormsModule, ReactiveFormsModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',

  providers: [
    authInterceptorProviders, authErrorInterceptorProvider
  ]
})
export class AppComponent {
  title = 'instazooFrontend';
}

app.routers.ts: 
import { Routes } from '@angular/router';
import {LoginComponent} from "./auth/login/login.component";
import {RegisterComponent} from "./auth/register/register.component";

export const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
];

<div class="login-page">
  <form [formGroup]="loginForm">
    <div class="justify-content-center">
      <mat-form-field appearance="outline">
        <mat-label>Email Address</mat-label>
        <input formControlName="username">
      </mat-form-field>
      <mat-form-field appearance="outline">
        <mat-label>Password</mat-label>
        <input matInput formControlPassword="Password">
      </mat-form-field>
    </div>
    <div id="controls" class="row">
      <button style="width: 20%" [disabled] = "loginForm.invalid" (click)="submit()" mat-flat-button color="primary">
        Login
      </button>
      <a routerLink="/register">Register</a>
    </div>
  </form>
</div>

................................................ ...................................................... ...................................................... ...................................................... ......

当我导航到“http://localhost:4200/login”时预计会看到表单，但我立即重定向到“http://localhost:4200”

Answer 1

转到您的 app-routing.module.ts 并确保您的路由与登录组件匹配。

您可以将此作为指南

...
...
imports


const routes: Routes = [
{
    path: '',
    pathMatch: 'full',
    component: YourWelcomeComponent // Whatever component you want to load when the application starts
  },
  {
    path: 'login',
    component: LoginComponent
  }
];