angular - 如何在 canActivate 返回 false 时重定向另一个组件？

Question

您好，我正在使用 angular 5 中的路由，并且我有一个使用 canActivate 属性的登录路径

当 canActivate 为 false 时，我可以重定向到另一个路径吗？ 我不希望用户在登录后看到登录页面。

如果用户登录，主服务返回false

{
    path: 'login',
    component: RegisterLoginComponent,
    canActivate: [MainService]
}

Answer 1

我认为更好的方法是使用 Guard 来保护您的默认路径如果身份验证失败，则从那里重定向到 /login。

/* AuthService */
isLoggedIn(): boolean {
  // check if user is logged in
  return isUserLoggedIn;
}

/* AuthGuard */
import { Router } from '@angular/router';
import { AuthService } from './auth.service';
...
constructor(private authService: AuthService, private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  // check if user is logged in
  const loggedIn: boolean = this.authService.isLoggedIn();
  // if not, redirect to /login
  if (!loggedIn) {
    this.router.navigate(['/login']);
  }
  return loggedIn;
}    

注意:如果您想控制重定向到的位置，您可以访问用户在 route.url 下尝试访问的 url。您可以检查它的值，然后导航到特定的 url，而不是总是导航到“/login”。

下面是一个快速示例代码，它也使用异步代码执行此重定向。 https://stackblitz.com/edit/angular-async-guard-redirect?file=src%2Fapp%2Fauth-with-redirect.guard.ts