Javascript 角度路由，包括身份验证保护和重定向

我有一个angular应用程序，希望实现客户端路由。我有3个组件：登录、聊天和管理。访问管理员和聊天室受到身份验证保护的限制。理想情况下，路由行为应为：

单击登录->路由以登录并重定向到管理员 单击管理或聊天->路由登录，并在成功登录时重定向到单击的管理或聊天服务器 我成功地设置了几乎正确的重定向，但单击“登录”时的重定向仍然取决于我在上一次/之前单击的位置。这意味着，如果用户单击登录，它将转到登录，成功登录后，它将重定向到聊天。然后用户注销并单击login，它进入login，但重定向到chat而不是admin，这是我不想要的。无论过去哪个路由是活动的，登录时的点击应该总是转到管理员

我怎样才能做到这一点

谢谢

应用程序组件 登录组件 聊天组件 奥特高尔德 应用程序路由模块 身份验证服务 不是在html中登录，而是像这样将重定向url放在typescript中

    login(): void {
        if (!this.isValidInput()) { return; }

        const data = {email: this.email, pass: this.password};
        this.authService.login('localhost:3000/login', data).subscribe((response: any) => { 
       if(response.isSuccess){
          this.loginForm.reset();
          this.authService.loggedIn=true;
           if(!this.authService.redirectUrl){
            this.router.navigateByUrl('/admin');  
            } else{
             this.router.navigateByUrl(this.authService.redirectUrl);  
            }
         }
        });
      }

若你们正在导航到登录URL，那个么请删除重定向URL，否则它将始终重定向到最后访问的页面

编辑

在App.component.html中，您将导航到使用routerlink登录，而不是使用此

<nav>
  <ol>
    <li><a (click)='redirectToLogin()'>Login</a></li>
    <li><a routerLink="/admin">Admin</a></li>
    <li><a routerLink="/chat">Chat</a></li>
  </ol>
</nav>
<router-outlet></router-outlet>

---

请提供联机示例好吗？您没有使用authService重定向URL？在登录html中，不要自动转到/admin routerLink=/admin，而是在成功登录时使用authService.redirecturl。如果未设置，请在代码中导航到/admin。感谢您的回复，我将更新示例以使其正常工作。@Carsten抱歉，我为MCVE删除了此部分。我正在按照您的建议进行查看更新登录代码，但问题不是它没有重定向，而是它取决于以前选择的路由。当用户单击聊天、重定向到登录、成功登录、转到聊天、注销、单击登录、成功登录并被重定向到聊天而不是管理员时，这一点非常重要。如果他点击登录我总是想重定向到admin@avermaet显然，在成功重定向后设置this.authService.redirecturl=null，否则它将继续重定向到以前设置的重定向URL…..登录时删除重定向URL的最后一句话是什么意思？无论何时使用router.navigateByUrl重定向到登录页或者routerlink，然后删除此.authService.redirectUrl，以便更好地使用，只是为了预防

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import {AuthService} from "../auth.service";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  email: string;
  password: string;
  loginMessage: string;
  loginForm: FormGroup;

  constructor(
    private http: HttpClient,
  ) { }

  ngOnInit() {
    this.loginForm = new FormGroup({
      'email': new FormControl(this.email, [
        Validators.required,
        Validators.email
      ]),
      'password': new FormControl(this.password, [
        Validators.required,
        Validators.minLength(2)
      ])
    });
    console.log('init');
  }
  logout(): void {
    this.authService.loggedIn = false;
  }
  login(): void {
    if (!this.isValidInput()) { return; }

    const data = {email: this.email, pass: this.password};
    this.authService.login('localhost:3000/login', data).subscribe((response: any) => {
      this.loginForm.reset();
      this.authService.loggedIn=true;
      let redirect = this.authService.redirecturl ? this.router.parseUrl(this.authService.redirecturl) : '/admin';
      this.router.navigateByUrl(redirect);  
    });
  }

  isValidInput(): Boolean {
    if (this.loginForm.valid) {
      this.email = this.loginForm.get('email').value;
      this.password = this.loginForm.get('password').value;
      return true;
    }
    return false;
  }
}

<form [formGroup]="loginForm">
  <!-- this div is just for debugging purpose -->
  <div id="displayFormValues">
    Value: {{loginForm.value | json}}
  </div>

  <label for="email"><b>Email</b></label>
  <input id="email" type="email" formControlName="email" email="true" required>
  <label for="password"><b>Password</b></label>
  <input id="password" type="password" formControlName="password" required>
  <button (click)="login()" routerLink="/admin" routerLinkActive="active">Login</button>
  <div id="loginMessage">{{loginMessage}}</div>
</form>

<p>admin works!</p>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<p>chat works!</p>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

import { Injectable } from '@angular/core';
import {ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot} from '@angular/router';

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

  constructor() {
  }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    let url: string = state.url;

    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.authService.redirecturl = url;
      this.router.navigate(['/login']);
      return false;
    }
  }

}

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChatComponent } from './chat/chat.component';
import { AdminComponent } from './admin/admin.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'admin',
    component: AdminComponent,
    canActivate: [AuthGuard]
  },
  {
    path: 'chat',
    component: ChatComponent,
    canActivate: [AuthGuard]
  }
];

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

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { throwError, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  redirecturl: string; // used for redirect after successful login
  username: string;
  loginMessage: string;
  greeting = 'Hello guest!';
  loggedIn = false;
  config = {
    serverHost: 'localhost',
    serverPort: 3000,
    loginRoute: 'login',
    standardGreeting: `Hello guest!`,
    standardUsername: 'Guest'
  };

  constructor(private http: HttpClient) { }

  login(loginUrl: any, body: { pass: string }) {
    return this.http.post(loginUrl, body, httpOptions)
      .pipe(
        catchError(this.handleError)
      );
  }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent) {
      console.error('An error occurred:', error.error.message);
    } else {
      console.error(
        `Backend returned code ${error.status}, ` +
        `body was: ${error.error}`);
    }
    return throwError(
      'Something bad happened; please try again later.');
  }

  isLoggedIn(): boolean {
    return this.loggedIn;
  }
  }
}

    login(): void {
        if (!this.isValidInput()) { return; }

        const data = {email: this.email, pass: this.password};
        this.authService.login('localhost:3000/login', data).subscribe((response: any) => { 
       if(response.isSuccess){
          this.loginForm.reset();
          this.authService.loggedIn=true;
           if(!this.authService.redirectUrl){
            this.router.navigateByUrl('/admin');  
            } else{
             this.router.navigateByUrl(this.authService.redirectUrl);  
            }
         }
        });
      }

<nav>
  <ol>
    <li><a (click)='redirectToLogin()'>Login</a></li>
    <li><a routerLink="/admin">Admin</a></li>
    <li><a routerLink="/chat">Chat</a></li>
  </ol>
</nav>
<router-outlet></router-outlet>

redirectToLogin(){
    this.authService.redirectUrl = null;
    this.router.navigateByUrl('/login');
}