Angular router.navigate() 在使用 AuthGaurd 重定向后无法正常工作

Question

我在我的 Angular 应用程序中使用路由保护实现路由

const appRoutes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'dashboard', canActivate: [AuthGuard], component: DashboardComponent }
];

auth.gaurd.ts

import { Injectable } from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';


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

    constructor(private authService: AuthService, private router: Router, private route: ActivatedRoute) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if (this.authService.isAuthenticated()) {
            return true;
        } else {
            this.router.navigate(['/']);
            return false;
        }
    }
}

login.component.ts（点击登录按钮响应的功能）

public onSubmit(loginForm): void {
    this.loginFailed = false;
    this.submitted = true;

    if (loginForm.invalid) {
      return;
    }

    if (this.authService.login(this.userName, this.password)) {
      console.log('ABLE TO CONSOLE THIS'); // THIS LINE IS EXECUTING 
      this.router.navigate(['/dashboard']);
    } else {
      this.loginFailed = true;
    }
  }

起初，如果我未通过身份验证并尝试直接导航到 /dashboard，我将被导航回 '/' 路线，这是正确的行为。但是，当我尝试使用正确的凭据再次登录（不刷新页面）时，我无法登录并且无法再导航到 /dashboard。

任何人都可以让我知道我在这里缺少什么吗？

Answer 1

问题是你在使用canActivate，它只能防止未经授权访问你的路由，但不能防止加载模块。所以你的模块已经被加载了，这就是为什么它不能工作，刷新。

我会建议你使用 canLoad 和 canActive

Answer 2

自 Angular v7 以来处理守卫重定向的最干净和建议的方法是 return 你守卫内的 URLTree，而不是命令式导航然后 returning false。这有助于防止其他与导航相关的错误。

之后您的代码可能如下所示：

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        if (this.authService.isAuthenticated()) {
            return true;
        } else {
            return this.router.parseUrl('/');
        }
    }

您可以在此处阅读更多相关信息：https://juristr.com/blog/2018/11/better-route-guard-redirects/

Angular router.navigate() 在使用 AuthGaurd 重定向后无法正常工作

Angular router.navigate() is not working after being redirected using AuthGaurd

angular-routing

angular

angular-router