I'm currently building an Angular project with Firestore. I have a users collection which contains a users uid plus their name, email and company name. Upon logging in, I can successfully take the users uid, look up the document in firestore and then redirect them to domain.com/theircompanyname - theircompanyname is what's stored in firestore under the user collection > document.
However, this currently doesn't prevent anyone entering a company name to the url and successfully navigating there. How would I go about implementing a route guard that only grants access to users who have a matching company to that which is visible in the url?
login.ts
login(email: string, password:string) {
this.afAuth.auth.signInWithEmailAndPassword(email, password).then(value => {
const user_id = value.user.uid;
this.userService.checkUserForCorrectRedirect(user_id)
});
}
user.service.ts This will redirect the user to the appropriate URL based on their company name in firestore (which i check by passing the user_id from login to this function)
checkUserForCorrectRedirect(user_id: string) {
var docRef = this.db.collection("users").doc(`${user_id}`);
docRef.get().then((doc) => {
if (doc.exists) {
const data = doc.data();
this.company = data.company;
this.router.navigate(['e', data.company]);
} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch((error) => {
console.log("Error getting document:", error);
});
}
All of the above works. The route guard is what I'd like assistance with if possible please.
router.guard This doesn't work obviously, and I don't really know how to make this work.
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate, Router } from '@angular/router';
import { UserService } from '../services/user.service';
@Injectable()
export class AuthGuardService implements CanActivate {
authGuardStateURL: string;
constructor(
private router: Router,
private userService: UserService,
) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){
if (this.userService.company == "testcompany") {
return true;
} else {
return false;
}
}
}
