Я реализовал регистрацию и вход в систему электронной почты и пароля в угловой пожарной базе, но теперь я хочу проверить в своем шаблоне навигации состояние пользователя, если пользователь вошел в систему, затем скрыть кнопку входа, а также скрыть регистр.кнопка.Я попробовал поискать учебники по этому вопросу и обнаружил, что должен использовать AuthService и AuthInfo, как вы можете видеть здесь:
https://github.com/angular-university/angular-firebase-app/blob/master/src/app/shared/security/auth.service.ts
Дело в том, что они используют многообещания и прочее, с которыми я не знаком, и это меня действительно смущает.Я пытаюсь достичь этого самым простым способом и ищу кого-то, кто бы помог мне и помог мне.
Вот мой код сейчас:
навигация -
<ul class="nav navbar-nav">
<li><a routerLink="" routerLinkActive="active">Home</a></li>
<li><a routerLink="login" routerLinkActive="active" *ngIf="!authInfo?.isLoggedIn()">Login</a></li>
<li><a routerLink="register" routerLinkActive="active" *ngIf="!authInfo?.isLoggedIn()">Register</a></li>
<li><a routerLink="quiz" routerLinkActive="active">Quiz</a></li>
</ul>
Мой Служба аутентификации файл со всеми пользователями, создающими и входящими в логику firebase -
@Injectable({
providedIn: 'root'
})
export class AuthService {
private user: Observable<firebase.User>;
constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
this.user = _firebaseAuth.authState;
this.user.subscribe(
(user) => {
if (user) {
this.userDetails = user;
console.log(this.userDetails);
} else {
this.userDetails = null;
}
}
);
}
logUserIn(email, pass) {
firebase.auth().signInWithEmailAndPassword(email, pass).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log("error" + error);
})
if (this.userDetails) {
email = this.userDetails.email;
console.log("hello im user" + " " + email);
} else {
console.log("not working");
}
this.router.navigate(['']);
}
regUser(email, pass) {
firebase.auth().createUserWithEmailAndPassword(email, pass)
.catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
});
}
}
Компонент входа -
@Component({
selector: 'login',
templateUrl: 'login.component.html'
})
export class LoginComponent {
form: FormGroup;
constructor(fb: FormBuilder, private _loginService: LoginService, private auth: AuthService) {
this.form = fb.group({
email: ['', Validators.required],
password: ['', Validators.compose([Validators.required,
PasswordValidator.cannotContainSpace])]
})
}
login() {
this.auth.logUserIn(this.form.value.email, this.form.value.password);
};
}
auth-info.ts файл по ссылке выше на github -
export class AuthInfo {
constructor(public $uid: string) { }
isLoggedIn() {
return !!this.$uid;
}
}
РЕДАКТИРОВАТЬ:
Так что благодаря Тушару Вальзаде мне удалось показать и скрыть эти кнопки, но я получаю действительно странное поведение.При выходе из системы проблем нет, но когда я вхожу, ничего не происходит, я получаю сообщение not working на консоль Chrome, которое приходит из моего метода logUserIn в сервисе аутентификации.Но когда я обновляю страницу один раз, то это показывает, что она работает, я получаю информацию о пользователе в консоли, а кнопки скрываются.Я не знаю, почему это происходит, но я думаю, что это может быть что-то с sessionStorage, о котором я ничего не знаю.
Вот код:
Authсервис
export class AuthService {
private user: Observable<firebase.User>;
private userDetails: firebase.User = null;
public loggedIn = false;
constructor(private _firebaseAuth: AngularFireAuth, private router: Router) {
this.user = _firebaseAuth.authState;
this.loggedIn = !!sessionStorage.getItem('user');
this.user.subscribe(
(user) => {
if (user) {
this.userDetails = user;
console.log(this.userDetails);
} else {
this.userDetails = null;
}
}
);
}
// Set current user in your session after a successful login
setCurrentUser(email: string): void {
sessionStorage.setItem('user', email);
this.loggedIn = true;
}
// Get currently logged in user from session
getCurrentUser(): string | any {
return sessionStorage.getItem('user') || undefined;
}
isLoggedIn() {
return this.loggedIn;
}
logUserIn(email, pass) {
firebase.auth().signInWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log("error" + error);
})
//var user = firebase.auth().currentUser;
//var email;
if (this.userDetails) {
email = this.userDetails.email;
console.log("hello im user" + " " + email);
//email = user.email;
this.setCurrentUser(email);
this.loggedIn = true;
} else {
console.log("not working");
}
this.router.navigate(['']);
}
regUser(email, pass) {
firebase.auth().createUserWithEmailAndPassword(email, pass)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
//console.log(this.form.controls['email'].value);
}
logOut() {
this.loggedIn = false;
firebase.auth().signOut().then(function() {
// Sign-out successful.
console.log("signout successful");
}).catch(function(error) {
// An error happened.
console.log("error happened");
});
}
}
Компонент входа
класс экспорта LoginComponent {
form: FormGroup;
constructor(fb: FormBuilder, private _loginService: LoginService, private auth: AuthService){
this.form = fb.group({
email:['',Validators.required ],
password:['',Validators.compose([Validators.required,
PasswordValidator.cannotContainSpace])]})
}
login(){
this.auth.logUserIn(this.form.value.email, this.form.value.password);
};
}
app.component.ts , потому что у меня есть розетка маршрутизатора и ссылкив app.component.html
export class AppComponent {
title = 'angular-draganddrop';
constructor(private auth: AuthService) { }
LoggedIn() {
return this.auth.isLoggedIn();
}
logout() {
return this.auth.logOut();
}
}
РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ:
Итак, япроверил хранилище сессии приложения в Chrome, и когда я выхожу из системы, я действительно вижу свою электронную почту пользователя, которая все еще там.Я должен удалить это вручную.Затем при попытке входа в систему в первый раз это не работает, и в хранилище сеанса также нет электронной почты пользователя.Во второй раз это добавляется.Система входа в систему работала нормально до добавления функциональности sessionStorage в код, так что она определенно связана с этим.Я не знаю, как работает sessionStorage, поэтому я ищу помощь, чтобы решить эту проблему.