Angular 5 Authentifizierung

Question

Ich versuche, den Authentifizierungsprozess mit Angular und .Net-Kern zu verstehen, die mir ein JWT Bearer-Token (Works) sendet. Also mein Problem ist, dass ich nicht weiß, was ich im Wächter und Auth-Dienst tun soll, um Benutzer (mit Rollen später) richtig zu verwalten. Aber ich habe ein paar Sachen ausprobiert und jetzt weiß ich nicht, was ich in meinem AuthService machen soll.

BEARBEITEN Ich werde ein Token und Ablaufdatum vom Server erhalten, nachdem Login-Post erledigt ist. also will ich diese und später auch noch anfragen aber idk wie. und was ich zurückgeben sollte. Diese

ist, wie mein AuthService wie folgt aussieht:

@Injectable() 
export class AuthService { 

isLoggedIn = false; 

    constructor(private http: HttpClient) {} 

login(email:string, password:string) :Observable<boolean>{ 
    this.http.post('/login', {email, password}) 
    .subscribe(data => 
    { 
     //TODO: check for Token ??? 
     let userAuth = data; 
     if(userAuth) { 
      localStorage.setItem('currentUser', JSON.stringify(userAuth)); 
      return true; 
     }else{ 
      return false; 
     } 
    }, 
    (err: HttpErrorResponse) => { 
     if(err.error instanceof Error){ 
     console.log("error client side"); 
     }else{ 
     console.log("Server side error."); 
     } 
    }); 
    //what should i return ????? and how 
    } 

logout() { 
    localStorage.removeItem('currentUser'); 
} 
} 

Nun weiß ich nicht, wie zu überprüfen, ob das Token gibt es und wie boolean zurück, wenn seine beobachtbar sind. Und nach dem Login ist alles erledigt, was auch für zukünftige Untersuchungen wichtig ist?

Und m AuthGuard sieht wie folgt aus:

@Injectable() 
export class AuthGuardService implements CanActivate{ 

constructor(private router:Router) { } 

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

if(localStorage.getItem('currentUser')){ 
    return true; 
} 

this.router.navigate(['auth/login'], 
    {queryParams: { returnUrl: state.url}}); 

} 

} 

Answer 1

Nur meine Bemerkungen und Ideen.

Persönlich würde ich dies in meiner Login-Methode tun. Dies würde tatsächlich ein Observable zurückgeben. Hinweis: Sie benötigen das Abonnement in Ihrer Login-Komponente.

login(email:string, password:string) :Observable<boolean>{ 
    return this.http.post('/login', {email, password}) 
    .map(data => { 
     let userAuth = data; 
     if(userAuth) { 
     localStorage.setItem('currentUser', JSON.stringify(userAuth)); 
     return true; 
     }else{ 
     return false; 
     } 
    } 
} 

Jetzt über Ihre Wache. Sie überprüfen, ist in der Tat sehr Woche. Sie können eine Anfrage stellen, um zu überprüfen, ob sie gültig ist, aber dies würde Ihre Anwendung sehr langsam machen. Meiner Meinung nach ist es besser, einfach zu prüfen, ob das Token am Frontend gültig ist. Dies setzt voraus, dass Backend-Dienste das Token bei jeder Anfrage prüfen. Da am Frontend alles verändert werden kann, gibt es keine sichere Möglichkeit, dies auf Ihrem Frontend zu handhaben. Stellen Sie wiederum sicher, dass Ihr Backend Ihren Token bei jeder Anfrage überprüft.

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> { 
    if(localStorage.getItem('currentUser') && 
    JSON.parse(localStorage.getItem('currentUser')).expireTime < new Date().getTimeInMillis()){ //You need to have the expire value in your token. 
     return true; 
    } 

    this.router.navigate(['auth/login'], {queryParams: { returnUrl: state.url}}); 
}