首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular和Firebase:如何在用户未显式注销的情况下保持登录状态?

Angular和Firebase:如何在用户未显式注销的情况下保持登录状态?
EN

Stack Overflow用户
提问于 2018-08-10 05:27:45
回答 1查看 907关注 0票数 0

我的angular应用程序有问题。如果在登录后,我转到另一个网站并再次返回到我的应用程序,我就被注销了。

即使我只是刷新页面,我也会被注销。

这是我的AuthService:

代码语言:javascript
复制
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类:

代码语言:javascript
复制
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;
        }     
    }
} 

在用户未显式注销的情况下,如何保持登录状态?

EN

回答 1

Stack Overflow用户

发布于 2018-08-10 06:02:56

问题出在您的代码中,因为这是默认行为变量isAuthenticated被初始化为false,并且只有在显式调用login()函数后才会进行修改我建议使用Replaysubject数据类型在AuthGuard和服务之间进行通信这里是一个使用此逻辑的示例代码您甚至可以排队读取数据库,以防路由逻辑取决于存储在数据库中的用户级别

代码语言:javascript
复制
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)
}}

你的守卫可以保持不变

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51776004

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档