Auth guard:
import { Injectable } from '@angular/core';
import { AngularFireAuth } from 'angularfire2/auth';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AuthService } from './auth.service';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/take';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private afAuth: AngularFireAuth, private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | boolean {
return this.afAuth.authState
.take(1)
.map(user => !!user)
.do(loggedIn => {
if (!loggedIn) {
console.log('access denied');
this.router.navigate(['/login']);
} else {
this.router.navigate(['/dashboard']);
}
});
}
}
验证服务:
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
@Injectable()
export class AuthService {
private loggedIn = new BehaviorSubject<boolean>(false);
user: Observable<firebase.User>;
get isLoggedIn() {
return this.loggedIn.asObservable();
}
constructor(private router: Router, private firebaseAuth: AngularFireAuth) {
this.user = firebaseAuth.authState;
}
login(userName: string, password: string) {
this.firebaseAuth
.auth
.signInWithEmailAndPassword(userName, password)
.then(value => {
console.log('Uspesno logovanje');
})
.catch(err => {
console.log('Neuspesno logovanje: ', err.message);
});
}
logout() {
this.firebaseAuth
.auth
.signOut();
}
}
app模块
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NguiMapModule } from '@ngui/map';
import { AngularFireModule } from 'angularfire2';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { FormsModule } from '@angular/forms';
import { environment } from './../environments/environment';
import { AppMaterialModule } from './app-material/app-material.module';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthGuard } from './auth/auth.guard';
import { AuthService } from './auth/auth.service';
import { ContactComponent } from './contact/contact.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { IconsComponent } from './icons/icons.component';
import { LoginComponent } from './login/login.component';
import { MapComponent } from './map/map.component';
import { NavbarComponent } from './navbar/navbar.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { TableComponent } from './table/table.component';
import { UserComponent } from './user/user.component';
@NgModule({
declarations: [
AppComponent,
LoginComponent,
DashboardComponent,
HomeComponent,
FooterComponent,
SidebarComponent,
NavbarComponent,
ContactComponent,
IconsComponent,
UserComponent,
TableComponent,
MapComponent,
NotificationsComponent,
],
imports: [
BrowserModule,
ReactiveFormsModule,
BrowserAnimationsModule,
AppMaterialModule,
HttpClientModule,
AppRoutingModule,
NguiMapModule.forRoot({ apiUrl: 'https://maps.google.com/maps/api/js?key=<MY_API_KEY>' }),
AngularFireModule.initializeApp(environment.firebase),
AngularFireDatabaseModule,
AngularFireAuthModule,
FormsModule
],
providers: [AuthService, AuthGuard],
bootstrap: [AppComponent]
})
export class AppModule { }
我添加了一些更改,在我之前,登录正在使用我在firebase控制台上指定的电子邮件凭据,但路由已关闭,所以我尝试修复它,我最终打破了更多。