Question

我正在使用AuthGuard和AnonymousGuard构建一个Angular 2/4应用（和Bootstrap 4 Alpha），以防止已登录的用户访问某些页面（/register {{ 1}} /login）将它们自动重定向到/forgot。

一切都很完美，但我目前正在努力处理客户端浏览器中显示的URL。

目前，我的DashboardComponent路径为HomeComponent，/为DashboardComponent。

但是为了获得更好的UX视角，我想要实现的是让所有用户在两种情况下都能看到主/dashboard网址：

匿名用户： project.com / =＆gt; /
LoggedIn用户： project.com / =＆gt; HomeComponent

我知道我可以通过使用一些DashboardComponent在我的家庭HTML中有条件地显示我的<app-home>和<app-dashboard>元素来实现这一目标，但我正在尝试考虑更清晰的Angular /路由器方式这样做（如果存在？）

我在我的Guards和routerLinks中尝试了*ngIf="isLoggedIn"方法但没有成功（请参阅this），因为如果用户位于我网站的其他位置，它将以某种方式保持显示以前的URL（例如：{ skipLocationChange: true }）即使它通过了我的警卫。

我还尝试通过注入/posts/show/隐藏/dashboard并按this使用Location。

这最后一种方法似乎接近我正在寻找的结果，但是一旦用户再次点击我们的徽标导航栏（replaceState），它就不再起作用了，因为初始化是完成。

我错过了什么吗？你们有其他想法吗？或者我应该辞职并在Home上寻求简单的routerLink="/"解决方案？我很高兴能为您提供反思和最佳解决方案！

由于

更新： Plunker here

应用-routing.module.ts

ngIf

匿名guard.service.ts

const appRoutes: Routes = [
 { path: '', pathMatch: 'full', component: HomeComponent, canActivate: [AnonymousGuard] },
 { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },
 // other stuff
 { path: '**', component: PageNotFoundComponent }
];

AUTH-guard.service.ts

 isLoggedIn: boolean;

 constructor(
  private router: Router,
  private authService: AuthService
 ) {
  this.authService.isLoggedIn().subscribe(is => {
   this.isLoggedIn = is;
   });
 }

 canActivate(route: ActivatedRouteSnapshot): boolean {
  // If Anonymous, can access the page
  if (!this.isLoggedIn) { return true; }
  // Else force redirect to Dashboard
  this.router.navigate(['/dashboard']);
  return false;
 }

dashboard.component.ts

isLoggedIn: boolean;

constructor(
 private router: Router,
 private authService: AuthService
) {
 this.authService.isLoggedIn().subscribe(is => {
  this.isLoggedIn = is;
 });
}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
 // Original URL is accessible via the 'state: RouterStateSnapshot' parameter
 let url: string = state.url;
 return this.checkLogin(url);
}

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  return this.canActivate(route, state);
}

checkLogin(url: string): boolean {
 if (this.isLoggedIn) { return true; }
 // Store the attempted URL
 this.authService.redirectUrl = url;
 // Navigate to the login page
 this.router.navigate(['/login']);
 return false;
}

Angular 2/4隐藏登录用户的仪表板URL

0 个答案: