使用AngularFireAuth重新定位angular 5应用程序

时间:2018-03-29 17:50:16

标签: angular firebase routes angular5 angularfire2

我使用AngularFireAuth进行了简单的身份验证,但现在我的路由不再起作用了,console.logs显示了' test'在“尼斯发挥作用”之前,所以出了什么问题? (这主要只是文档中的routing guard

AUTH-服务

@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 => {
    console.log('Nice, it worked!');
    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');
  }

路由

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

AUTH-卫

@Injectable()
export class AuthGuard implements CanActivate, CanActivateChild {
  constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
 let url: string = state.url;

 return this.checkLogin(url);
}

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
 return this.canActivate(route, state);
}

checkLogin(url: string): boolean {
 if (this.authService.isLoggedIn) { return true; }

 // Store the attempted URL for redirecting
 this.authService.redirectUrl = url;

 // Navigate to the login page with extras
 this.router.navigate(['/admin']);
 return false;
}

0 个答案:

没有答案