通过守卫保护 angular 欺骗

Question

我有一种 ChatbotComponent 没有附加到任何路由配置。

@Component({
  selector: 'app-chatbot',
  templateUrl: './chatbot.component.html',
  styleUrls: ['./chatbot.component.css'],
  providers: [UsersService, OrganizationService]
})

该指令在 app.compononent.html 覆盖的应用程序模块下调用：

<app-logo></app-logo>
<router-outlet></router-outlet>
<app-footer></app-footer>
<app-chatbot></app-chatbot>

这是我的routing.yaml

const routes: Routes = [
  { path: '',  component: LoginComponent, pathMatch: 'full', canActivate: [AuthenticationGuard]},
  { path: 'accueil',  component: AccueilComponent, canActivate: [AuthenticationGuard] },
  { path: '**', redirectTo: '' }
];



@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})

我想问有没有什么方法可以通过我的 AuthenticationGuard 保护 ChatbotComponent 以阻止 api 在组件 !

下触发的调用

这是关于我的依赖的一个小愿景：

+-- @angular/animations@5.2.11
+-- @angular/cli@1.7.4
| +-- @angular-devkit/build-optimizer@0.3.2
| +-- @angular-devkit/core@0.3.2
| +-- @angular-devkit/schematics@0.3.2
| +-- @schematics/angular@0.3.2
+-- @angular/common@5.2.11
+-- @angular/compiler@5.2.11
+-- @angular/compiler-cli@5.2.11
+-- @angular/core@5.2.11
+-- @angular/forms@5.2.11
+-- @angular/http@5.2.11
+-- @angular/language-service@5.2.11
+-- @angular/platform-browser@5.2.11
+-- @angular/platform-browser-dynamic@5.2.11
+-- @angular/router@5.2.11
+-- angular-in-memory-web-api@0.5.4

谢谢

Answer 1

您可以简单地使用 *ngIf

<app-chatbot *ngIf="isAuthenticated"></app-chatbot>

您应该在 app.component.ts 中定义 isAuthenticated 并在用户通过身份验证时分配 true，否则分配 false。

编辑：例如在你的 app.component.ts

export class AppComponent implements OnInit {
    public isAuthenticated: boolean = false;

    constructor(
        private authenticationService: AuthenticationService
    ) {
    }

    // Authentication service has an obsevable authenticated that emits a value when the user authentication status changes.
    // in ngOnInit subscribe to that value
    public ngOnInit(): void {
        this.authenticationService.authenticated$.subscribe((val) => {
             this.isAuthenticated = val;
        });
    }
}

通过守卫保护 angular 欺骗

Protect angular derective via guard

angular

angular2-routing