Angular 2 Route Guard CanActivate based on Firebase User Role

Question

I've been spending hours and hours working in circles trying to figure this out. I need to secure the routes based on the users roles.

constructor(private af: AngularFire, private db: AngularFireDatabase, private router: Router, private auth: AngularFireAuth) {

    af.auth.subscribe(user => {

        if (user) {
            this.getUserRole(user);
        } else {
            console.log('no user');
        }

    });

}

This at least gets the role:

 getUserRole(user): any {

  this.db.list('users', {
        query: {
            orderByKey: true,
            equalTo: user.uid
        }
    }).subscribe(user => console.log(user[0].role));

}

This at is a working CanActivate based on if this user is logged in but obviously the role doesn't matter.

canActivate(route:ActivatedRouteSnapshot,
            state:RouterStateSnapshot):Observable<boolean> {

            return this.af.auth.take(1)
        .map(authSate => !!authSate)
        .do( authenticated => {
            console.log(authenticated)
            if (!authenticated)
            this.router.navigate(['/login'])
        })

}

I can't figure out how to take the user role in to account. My setup is very basic... Its /users/$uid/role.

Here is something else I tried:

export class AuthService {

static UNKNOWN_USER = new AuthInfo(null, null);

authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);

constructor(private af: AngularFire, private db: AngularFireDatabase, private router: Router, private auth: AngularFireAuth) {

    af.auth.subscribe(user => {

        if (user) {

            let getRole = this.db.list('users', {
                query: {
                    orderByKey: true,
                    equalTo: user.uid
                }
            }).subscribe(snap => {
                if (snap.length === 0) {
                    return;
                } else {
                    let role = "";
                    role = snap[0].role
                    const authInfo = new AuthInfo(user.uid, role);
                    this.authInfo$.next(authInfo);
                }
            });

        } else {
            console.log('no user');
        }

    });

}

Here is the AuthInfo class:

export class AuthInfo {

constructor(public $uid: string, public role: string) { }

isLoggedIn() {
    console.log('from authinfo', !!this.$uid)
    //tells us if user is logged in or not
    return !!this.$uid;
}

isGroupALoggedIn() {
    //tells us if user is logged in or not
    return !!this.$uid && this.role === "GroupA";
}

isGroupBLoggedIn() {
    //tells us if user is logged in or not
    return !!this.$uid && this.role === "GroupB";
}

}

This is a test from the Home Component:

export class HomeComponent implements OnInit {

authInfo: AuthInfo

constructor(private authService: AuthService) { }

ngOnInit() {
    //returns boolean
    this.authService.authInfo$.subscribe(authInfo => {
        console.log(authInfo);
        this.authInfo = authInfo
    });
}

}

This works as well but I can't figure out how to tie this to CanActivate

Answer 1

You need to chain the two observables — the one getting the user and the one getting the user role — using the mergeMap() operator.

Place all this code inside a canActivate hook.

canActivate(): Observable<boolean> {
  return af.auth
    .mergeMap(user =>
      // Extract the role from userData if user exists, or empty string if no user.
      user ? getUserRole(user).map(userData => userData[0].role) : Observable.of('')
    )
    // Transform the role into true or false
    // since this is what canActivate() must return.
    .map({
      if (userRole === "GroupA") {
        return true;
      } else {
        this.router.navigate(['/login']);
      }
    });
}

In this example, the route will be activated for users with role "GroupA".

UPDATE: Check for existence of user + redirect if no allowed role, as per dhndeveloper requirements.

Answer 2

Just needed to check if a user exists at all in addition to @AngularFrance's solution:

canActivate(route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> {

    return this.af.auth
        .mergeMap(user => {
            if (user) {
                // Extract the role from userData
                return this.authService.getUserRole(user).map(userData => userData[0].role)
            } else {
                return Observable.of({});
            }

        })
        // Transform the role into true or false
        // since this is what canActivate() must return.
        .map(userRole => {
            if (userRole === "GroupA") {
                return true;
            } else {
                this.router.navigate(['/login']);
            }
        });

}