AuthGuard路由器角度

时间:2018-09-13 12:11:56

标签: angular typescript rxjs

我正在尝试进行永久登录,并且一切正常,除非从仪表板重新加载该页面(该页面是受AuthGuard保护的页面),但我已重定向到登录页面,但仍然可以登录,并且navbar仍然可以正常工作。任何建议都会对我有很大帮助。

export class AuthGuard implements CanActivate {

    constructor(private auth: AuthService, private router: Router) {

    }

    canActivate(
        next: ActivatedRouteSnapshot,
        state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
        return this.auth.getLoggedIn
            .pipe(
                map((res: boolean) => {
                    console.log(res);  // this one returns false when I reload page    
                    if (!res) {
                        this.router.navigate(['login']);
                        return false;
                    }
                    return true;
                })
            );
    }
}

下面是我的身份验证服务

export class AuthService {

    private loggedIn: BehaviorSubject<boolean>;

    constructor(private http: HttpClient) {

        this.loggedIn = new BehaviorSubject<boolean>(false);
    }

    setLoggedIn(value: boolean) {
        this.loggedIn.next(value);
    }

    get getLoggedIn() {
        this.updatelogin().subscribe(res => {
            this.loggedIn.next(res);

        })
        return this.loggedIn.asObservable();
    }

    updatelogin() {
        return this.http.get<boolean>('/api/islogged'); // API server returns a boolean by calling req.isAuthenticated()-passport
    }
}

我删除了不必要的代码,但是如果您需要其他任何信息,请告诉我,我将编辑我的帖子。

1 个答案:

答案 0 :(得分:0)

仅使用Subject而不是BehaviorSubject应该可以解决问题:

您首先创建一个带有错误值的BehaviorSubject

this.loggedIn = new BehaviorSubject<boolean>(false);

然后您进行HTTP调用以发出新值

this.updatelogin().subscribe(res =>{
   this.loggedIn.next(res);
 })

但是您不必等待该调用结束以返回值

return this.loggedIn.asObservable();