Angular 5身份驗證

我試圖瞭解與Angular和.Net核心的身份驗證過程，它向我發送了一個jwt持票人令牌（Works）。所以我的問題是，我不知道我應該怎麼做在守衛和身份驗證服務來正確地管理用戶（以後有角色）。但我嘗試了一些東西，現在我不知道我應該在我的AuthService中做什麼。Angular 5身份驗證

編輯登錄後，我會從服務器得到一個令牌和到期日期。所以我想存儲這些，後來還聲稱，但idk如何。和我應該回來的。

這是我AuthService看起來像：

@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'); 
} 
}

現在我不知道如何檢查，如果令牌是存在的，如果其顯着如何返回boolean變量。之後登錄完成後，檢查未來調查也很重要？

和M AuthGuard看起來是這樣的：

@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}}); 

} 

}

來源

2017-12-18 Amsel

什麼問題>？ –

發佈代碼，而不是它的圖像。 –

我假設你也想存儲令牌。或者'currentUser'的內容是什麼？是的，如上所述，這有什麼問題？ :) – Alex

只是我的意見和想法。

就我個人而言，我會在我的登錄方法中執行此操作。這實際上會返回一個Observable。注意：您需要在您的登錄組件中進行訂閱。

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; 
     } 
    } 
}

現在關於你的警惕。你檢查確實很周。你可以提出請求來檢查它是否有效，但這會讓你的應用程序非常慢。在我看來，最好只檢查令牌在前端是否有效。這假定您的後端服務在每個請求上檢查標記。由於前端的所有內容都可以修改，所以在你的前端沒有保存的方法來處理這個問題。同樣，只要確保您的後端在您的請求中檢查您的令牌。

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}}); 
}

來源

2017-12-18 14:41:55

好吧，我明白了。如果我如果我有角色呢？順便說一句。謝謝你好。 – Amsel

簡單地建立你的警惕。也許不是重定向，而是返回false。 –

Angular 5身份驗證

回答

相關問題