Angular和Firebase:如何在用户未显式注销的情况下保持登录状态？
Angular和Firebase:如何在用户未显式注销的情况下保持登录状态？
提问于 2018-08-10 05:27:45
我的angular应用程序有问题。如果在登录后，我转到另一个网站并再次返回到我的应用程序，我就被注销了。
即使我只是刷新页面，我也会被注销。
这是我的AuthService：
export class AuthService {
private isAuthenticated = false;
constructor(private router: Router, private db: AngularFirestore, private angularFireAuth: AngularFireAuth) {}
login(authData: AuthData) {
this.angularFireAuth.auth.signInWithEmailAndPassword(
authData.email,
authData.password
).then(result => {
this.loggedInSuccessfully();
})
.catch(error => {
console.log(error);
});
}
logout() {
this.loggedOutSuccessfully();
}
isAuth() {
return this.isAuthenticated;
}
private loggedInSuccessfully() {
this.isAuthenticated = true;
this.router.navigate(['']);
}
private loggedOutSuccessfully() {
this.angularFireAuth.auth.signOut();
this.router.navigate(['login']);
this.isAuthenticated = false;
}}
..。这是AuthGuard类：
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.authService.isAuth()) {
return true;
}
else {
this.router.navigate(['login']);
return false;
}
}
} 在用户未显式注销的情况下，如何保持登录状态？
回答 1
Stack Overflow用户
发布于 2018-08-10 06:02:56
问题出在您的代码中，因为这是默认行为变量isAuthenticated被初始化为false，并且只有在显式调用login()函数后才会进行修改我建议使用Replaysubject数据类型在AuthGuard和服务之间进行通信这里是一个使用此逻辑的示例代码您甚至可以排队读取数据库，以防路由逻辑取决于存储在数据库中的用户级别
import { ReplaySubject } from 'rxjs'
import { take, tap, map } from 'rxjs/operators';
export class AuthService {
private isAuthenticated: ReplaySubject<boolean> = new ReplaySubject(1)
constructor(private router: Router, private db: AngularFirestore,
private angularFireAuth: AngularFireAuth) {
angularFireAuth.authState.subscribe(state => {
this.isAuthenticated.next(state)
})
}
login(authData: AuthData) {
this.angularFireAuth.auth.signInWithEmailAndPassword(
authData.email,
authData.password
).then(result => {
this.loggedInSuccessfully();
})
.catch(error => {
console.log(error);
});
}
logout() {
this.loggedOutSuccessfully();
}
/**
* This function will never return a value until the replay subject gets a value, which is assigned only when the auth state changes
*/
isAuth() {
return this.isAuthenticated.pipe(
take(1),
map(authState => !!authState),
tap(authenticated => {
if (!authenticated) {
return false;
}
else {
return true;
}
}), );
}
private loggedInSuccessfully() {
this.isAuthenticated.next(true)
this.router.navigate(['']);
}
private loggedOutSuccessfully() {
this.angularFireAuth.auth.signOut();
this.router.navigate(['login']);
this.isAuthenticated.next(false)
}}你的守卫可以保持不变
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51776004
复制相关文章
相似问题
腾讯云开发者
