Angular:路由重定向问题

时间:2020-02-20 18:18:39

标签: angular typescript web-frontend

我正在按角度使用路由器来重定向用户,具体取决于他/她是否已登录以及他们当前的URL: 在下面,您可以看到来自我的app-routing-module的路由:

const routes: Routes = [
  { path: 'home', component: HomeComponent, canActivate: [RouteGuardService] },
  { path: 'login', component: LoginComponent},
  { path: '', redirectTo: 'login', pathMatch: 'full'}, // redirects to '' exists hence keep this in mind when redirecting
  { path: '**', redirectTo: 'home' }, 
];

在用户未登录但尝试访问“ / home”目录的情况下,他/她被重定向到“ / login”。我用于实现此目的的代码是。

if (accessGranted){
   return true;
} else {
   // tell router to navigate to login pag
   this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } });
   return false;
}

该代码基本上可以正常工作,但是仍然存在一个错误:如果我尝试不登录就访问家,则只有在刷新后,我才会重定向到“ /”。我真的不明白为什么会发生这种情况,很想解决这个问题。

最好的问候, 山姆

1 个答案:

答案 0 :(得分:0)

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (!this.authService.isLoggedIn) {
      return this.router.parseUrl(`/login?returnUrl=${state.url}`);
    } else {
      return true;
    }
  }
}