Question

您好我在角度5使用路由，我有一个使用canActivate属性的登录路径

当canActivate为false时，我可以重定向到另一个路径吗？如果他/她已登录，我不希望用户看到登录页面。

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

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

Answer 1

如果凭据匹配，则在登录服务中重定向

 this.authService.signin(user)
  .subscribe(
    data => {

      this.router.navigateByUrl('/dashboard');
    },
    error => console.error(error)
  )

Answer 2

我认为更好的方法是使用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

当canActivate返回false时，如何重定向另一个组件？

2 个答案: