Question

我想在身份验证失败时渲染另一个模板：

@Component({
    selector: 'app-root',
    templateUrl: './a.html',
  })
export class AppComponent implements OnInit {
   ngOnInit() {
      if (!this.isAuthenticated()) {
          this.templateUrl = './b.html';
      }
   }
   isAuthenticated(): boolean {
      // return by user authenticate status
   }
}

Answer 1

您需要的实际上是一名警卫，而不是重定向或其他组件。

创建包含以下代码的authentication.guard.ts：

@Injectable()
export class AuthenticationGuard implements CanActivate {

constructor(
    private router: Router,
    private authenticationService: AuthenticationService,
) {}

public canActivate(): boolean {
    if (this.authenticationService.isLoggued()) {
        return true;
    }

    this.router.navigate(["/login"]);
    return false;
}

}

在路径定义中，指定对此定义组件的访问权应受此保护：

{ path: "yourRoute", component: DummyComponent, canActivate: [AuthenticationGuard] },

现在每个请求都会被这个警卫“检查”。你很高兴。

组件上模板的动态更新

1 个答案: