Question

我已经设置了一个登录组件和视图，它正在按预期工作，以防止用户在未登录时访问受AuthGuard保护的路由。但是，我在主页登录屏幕上也有一个搜索栏（实际上它在应用程序的每个页面上）。因此，既然它不是一个路由，但它是一个组件，我如何禁用未登录的用户呢？

Answer 1

基本上在您的身份验证中，您希望添加某种标志，表示用户已登录。在我的示例中，我使用的是布尔值。因此，如果布尔值为false，则禁用输入。如果布尔值为true（或用户已登录），则不再禁用它。假设您的auth是一个单独的组件，您可能必须将此标志作为服务传递。

import {Component, NgModule, ViewChild} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <h2>login is "password"</h2>
      <input [value]="password" (input)="password = $event.target.value"> <button (click)="Authed()">login</button>
      <h2>search</h2>
      <input [disabled]="!Auth">
    </div>
  `,
})
export class App {
  name:string;
  Auth: boolean;
  password = "";
  constructor() {
    this.name = 'Angular2';
    this.password = '';
  }

  onKey(event:any) { // without type info
    this.password += event.target.password;
    console.log(this.password);
  }

  Authed(){
    if(this.password === "password"){
      this.Auth = true;
    }
    else(){
      this.Auth = false;
    }

  }

}

这是我正在谈论的here

的工作人员

禁用Angular 2应用程序中未登录用户的搜索字段

1 个答案: