角+ノード - Auth Guardを使用して認証されたユーザーを確認する方法

Question

jwtヘッダーが存在するバックエンドAPIに要求を行うことによって、使用が認証されているかどうかを確認しようとしています。ユーザーが返された場合、返されない場合は、権限のないユーザーに戻ります。

問題はauth.serviceがクエリを終了していないため、auth.guardが起動され、console.logに未定義が返されることです。これを達成するために、ここで最高の実装ですいただきまし

auth.guard.ts

import { Injectable } from '@angular/core'; 
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Observable } from 'rxjs/Observable'; 
import { Router } from '@angular/router'; 
import { AuthService } from '../services/auth.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 


    constructor(private authService: AuthService, private router: Router) { } 


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

    console.log(this.authService.isAuthenticated()); 

    if (this.authService.isAuthenticated()) { 
     return true; 
    } 

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

    } 
} 

auth.service.ts

import { JwtService } from './jwt.service'; 
import { Injectable } from '@angular/core'; 
import { ApiService } from './api.service'; 
import { UserService } from './user.service'; 

@Injectable() 
export class AuthService { 

    user: any; 

    constructor(
    private apiService: ApiService, 
    private jwtService: JwtService, 
    private userService: UserService) { 


     this.getAuthenticatedUser().subscribe(res => { 
     console.log(res); 
     this.user = res; 
     }, (error) => { 
     this.user = null; 
     }); 


    } 

    login(credentials) { 

    let endpoint = 'auth/' 

    return this.apiService.post(endpoint, credentials) 
     .map(res => { 
     this.jwtService.saveToken(res.data.jwtToken); 
     window.localStorage.setItem('user_id', res.data.user._id); 
     }); 
    } 

    logout() { 

    } 


    isAuthenticated() { 
    return this.user; 
    } 

    getAuthenticatedUser() { 

    let endpoint = 'auth/' 

    return this.apiService.get(endpoint); 
    } 

} 

？

Answer 1

ローカルストレージセッションを追加することで、これを簡略化できます。ユーザーが認証されると、トークンをlocalstorageおよびauthguardサービスに格納することができ、ステータスを確認できます。例えば

：

次のようにあなたが

export class LoginInfo { 
    username: string; 
    role: string; 
    token: string; 
    isLoggedIn: boolean; 
} 

とあなたのauthservice.ts

login(username: string, password: string): Observable<LoginInfo> { 
     const url = `${environment.apiUrl}/token`; 
     const params = 'username=' + username + '&password=' + password + '&grant_type=password'; 
     const headers = new Headers({ 
      'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8' 
     }); 
     return this.http.post(url, params, { headers: headers, withCredentials: true }) 
      .map((response: Response) => { 
       console.log(response); 
       const token = response.json() && response.json().access_token; 
       if (token) { 
        this.tokenInfo = this.decodeToken(token); 
        this.loggedInfo = new LoginInfo(); 
        this.loggedInfo.role = this.tokenInfo.Role; 
        this.loggedInfo.token = token; 
        this.loggedInfo.username = username; 
        this.loggedInfo.isLoggedIn = true; 
        localStorage.setItem('token', token); 
        localStorage.setItem('loggedInfo', JSON.stringify(this.loggedInfo)); 
        return this.loggedInfo; 
       } else { 
        return this.loggedInfo; 
       } 
      }, 
      err => console.log(err)); 
    } 

とあなたのauth-guard.service.ts

中に、ログインユーザ情報を持つクラスを作成することができます

あなたは、単にトークンをチェックして、トークンが存在しない場合、ログインするリダイレクトすることができます

canActivate() { 
    if (localStorage.getItem('loggedInfo')) { 
     return true; 
    } 
    this.router.navigate(['/login']); 
    return false; 
}