Angular 5 没有 angularfireauth 路由的身份验证安全性不起作用

Question

我有一个带有管理面板的 Angular 5 应用程序，该应用程序只有一个用户可以从我的 firebase 数据库获取数据，由于网站的托管服务，我不使用真实的后端并使用 firebase 作为 NOSQL 数据库。我试过 okta 但无法正常工作，所以我正在寻找其他选择。我重定向了我的路线，因此只有登录用户才能访问管理概览组件，但我检查用户登录凭据的方式很糟糕，我正在寻找一种简单且更好的方法。我只需要一个用户。我有哪些选择？

管理组件

loginUser() {
  if(this.username == 'test' && this.password == 'test'){
    this.service.login().subscribe(userIsLoggedIn =>
      this.router.navigate(['admin/overview']));
  }
}

路由

{
  path: 'admin',
  component: AdminLoginComponent,
  data: {title: 'Admin'}
},
{
  path: 'admin/overview',
  component: AdminOverviewComponent,
  canActivate: [AuthGuard],
  data: {title: 'Overview'}
}

Answer 1

我得到了使用 AngularFireAuth 的简单身份验证

auth-service

@Injectable()
export class AuthService {
  user: Observable<firebase.User>;
  constructor(private firebaseAuth: AngularFireAuth){
    this.user = firebaseAuth.authState;
  }
  isLoggedIn = false;

  login(email: string, password: string): Observable<boolean> {
    this.firebaseAuth
  .auth
  .signInWithEmailAndPassword(email, password)
  .then(value => {
    this.isLoggedIn = true;
    return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
  })
  .catch(err => {
    console.log('Something went wrong:',err.message);
  });
return Observable.of(false).delay(1000).do(val => this.isLoggedIn = false);
}
}

登录组件

constructor(private router: Router, private service: AuthService){}
loginUser() {
    this.service.login(this.email, this.password).subscribe(userIsLoggedIn =>
      this.router.navigate(['admin/overview']));
      this.email = this.password = '';
      console.log('test');
  }

Angular 5 没有 angularfireauth 路由的身份验证安全性不起作用

Angular 5 authentication security without angularfireauth routing doesn't work

firebase

angularfire

firebase-authentication

angular

angular5