Question

在我的Angular应用程序中，我想为未经身份验证的用户提供一组路由，为经过身份验证的用户提供一组路由。例如，通过身份验证后，您将无法进入/ login的登录页面。

我可以轻松设置。当我希望两种情况的“起点”都是/时，真正的麻烦就来了。我的意思是，当您第一次进入网站时（当然，未经身份验证），您应该看到欢迎页面为http://example.com/。登录并进行身份验证时，您还应该仅将URL看到为http://example.com/。

起初，我只是让AppComponent渲染了PublicComponent（如果未通过身份验证），而我的路线是在通过身份验证的情况下。在我不得不为未经身份验证的用户实现更多页面并为此需要一个路由器之前，这种方法一直有效。 PublicComponent还不够。

我已经尝试了几种方法，但是没有一种起作用。在导航中找不到该组件，或者未显示该组件。

现在我有路线

    {
        path: "",
        component: PublicComponent  // unauthenticated
    },
    {
        path: "pageA",
        component: PageAComponent   // unauthenticated
    }
    {
        path: "",
        component: HomeComponent,   // authenticated
        outlet: "authenticated"
    },
    {
        path: "pageB",
        component: PageBComponent,   // authenticated
        outlet: "authenticated"
    },
    {
        path: "pageC",
        component: PageCComponent,   // authenticated
        outlet: "authenticated"
    },
    {
        path: "**",
        component: PageNotFoundComponent
    }

app.component.html：

  <div *ngIf="isAuthenticated(); else notAuthenticated">
    <router-outlet name="authenticated"></router-outlet>
  </div>
  <ng-template #notAuthenticated>
    <router-outlet></router-outlet>
  </ng-template>

未经身份验证的路由（没有出口）似乎可以正常工作。我可以在它们之间导航。当输入具有经过验证的出口的路由时，它将跳至通配符，在这种情况下为PageNotFoundComponent。很好。

登录并成为经过身份验证的用户时，HomeComponent会按/向我打招呼，但它似乎也超越了其他途径。例如，当输入/ pageB时，HomeComponent正在初始化并再次呈现。因此，我尝试为其提供完整的路径匹配，以阻止其覆盖其他路径。

...
    {
        path: "",
        component: HomeComponent,
        outlet: "authenticated",
        pathMatch: "full"
    },
...

现在其他页面只是空白。没有呈现好像无法找到它们的任何组件-但也没有错误。我可以输入我想要的任何乱码URL，而只是得到一个空白页。

我拒绝相信这是不可能的。因此，任何帮助或建议都将不胜感激！谢谢！

修改

是的，我已经尝试过AuthGuard，但仍无法使其与我的设置兼容。

Answer 1

您应该使用AuthGuard来实现，然后在路由中指定适用于authGuard的链接，如下所示。

{
    path: "pageC",
    component: PageCComponent, : canActivate: [AuthGuard]
},

然后，您可以使用有角度的CLI生成AuthGuard，就像这样

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



@Injectable()
export class AuthGuard implements CanActivate {
constructor(private auth: AuthService, private router: Router) {}

canActivate(
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean> | boolean {
       if (this.auth.authenticated) { // This is the injected auth service which depends on what you are using
            return true; 
           }

       console.log('access denied!')
       this.router.navigate(['/login']);
       return false


   }

}

您也可以使用下面的链接获取更多信息 https://angular.io/api/router/CanActivate

Answer 2

路由在配置中的顺序很重要，这是设计使然。路由器在匹配路由时会采用“先赢”策略，因此应将更具体的路由置于不那么具体的路由之上。

此外，应使用路由防护器来确保路由安全，请参阅：https://angular.io/api/router/CanActivate

如何在Angular中以起点/设置经过身份验证和未经身份验证的路由？

2 个答案: