角2の認証状態

Question

私はAngular 2を使ってログインページを実装しました。ログイン後、私はjsonwebtoken、userId、userRole、userNameをserverから取得します。この情報をlocalstorageに保存するので、いつでもアクセスでき、ユーザーがページを更新するとログイン状態を維持できます。

AuthService.ts

import {Injectable} from "@angular/core"; 

@Injectable() 
export class AuthService { 
    redirectUrl: string; 

    logout() { 
    localStorage.clear(); 
    } 

    isLoggedIn() { 
    return localStorage.getItem('token') !== null; 
    } 

    isAdmin() { 
    return localStorage.getItem('role') === 'admin'; 
    } 

    isUser() { 
    return localStorage.getItem('role') === 'user'; 
    } 

} 

ログイン状態を確認するために、私はちょうどトークンがのlocalStorageに存在するかどうかをチェックしています。 localstorageは編集可能なので、localstorageにトークンを追加するだけでログインページを回避できます。同様に、クライアントがローカルストレージ内のユーザロールを編集する場合、クライアントは管理ページまたはユーザページに簡単にアクセスできます。

どのようにこれらの問題を解決しますか？

これは一般的な問題とよく似ていますが、ウェブサイトのログインステータスがどのように維持されているかを知りたいですか？

P.S. jsonwebtoken

const jwt = require('jsonwebtoken'); 
const User = require('../models/User'); 

/** 
* POST /login 
* Sign in using username and password 
*/ 
exports.postLogin = (req, res, next) => { 
    User.findOne({username: req.body.username}) 
     .then(user=> { 
      if (!user) { 
       res.status(401); 
       throw new Error('Invalid username'); 
      } 
      return user.comparePassword(req.body.password) 
       .then(isMatch=> { 
        if (isMatch != true) { 
         res.status(401); 
         throw new Error('Invalid password'); 
        } 
        let token = jwt.sign({user: user}, process.env.JWT_SECRET, { 
         expiresIn: process.env.JWT_TIMEOUT 
        }); 
        return res.status(200).json({ 
         success: true, 
         token: token, 
         userId: user._id, 
         role:user.role, 
         name:user.name 
        }); 
       }); 
     }) 
     .catch(err=>next(err)); 
}; 

-Thanks

Answer 1

1を生成する NodeJSサーバー側ログインコード）トークンは、（）の大きな長さのようなタイプに固有と難しいことになっています。また、いくつかの頻度でリフレッシュする必要があります。この上にoAuth docsをお読みください。

2）クライアント側にはロールを格納しないでください。サーバー上でのみチェックします。 また、oAuthを使用する場合は、スコープの使用を検討してください。

Answer 2

あなたはデジタルで、サーバー側の認証トークンの署名：

jwt.sign({user: user}, process.env.JWT_SECRET, { 
    expiresIn: process.env.JWT_TIMEOUT 
}) 

このシグネチャは、その後、後続の要求で、サーバー側で検証する必要があります。クライアントがトークンの内容を変更すると無効になります。

Answer 3

トークンをlocalStorage/sessionStorageに格納し、必要に応じてサーバーとトークンを検証します。私はトークン

UserProfileService.ts

@Injectable() 
export class UserProfileService { 
    private isLoggedIn: boolean = false; 
    private apiEndPoint: string; 
    constructor(private http: Http) { 
    this.apiEndPoint = environment.apiEndpoint; 
    } 

    login(token: string) { 
    localStorage.setItem('auth_token', token); 
    this.isLoggedIn = true; 
    } 

    logout(){ 
    localStorage.removeItem('auth_token'); 
    this.isLoggedIn = false; 
    } 

    isAuthorized(): Observable<boolean> { 
    if (!this.isLoggedIn) { 
     let authToken = localStorage.getItem('auth_token'); 
     if(authToken){ 
     let headers = new Headers(); 
     headers.append('Content-Type', 'application/json'); 
     headers.append('Accept', 'application/json'); 
     headers.append('Authorization', `Bearer ${authToken}`); 
     return this.http.get(`${this.apiEndPoint}/validate-token`, { headers: headers }) 
     .map(res => { 
      let serverResponse = res.json(); 
      this.isLoggedIn = serverResponse['valid']; 
      if (!this.isLoggedIn) { 
      localStorage.removeItem('auth_token'); 
      } 
      return this.isLoggedIn; 
     }) 
     .catch(this._serverError); 
     } 
    } 
    return Observable.of(this.isLoggedIn); 
    } 

    private _serverError(err: any) { 
    localStorage.removeItem('auth_token'); 
    if(err instanceof Response) { 
     console.log(err.json()); 
     return Observable.of(false); 
    } 
    return Observable.of(false); 
    } 

} 

AuthService.ts

@Injectable() 
export class CanActivateAuthGuard implements CanActivate, CanActivateChild, CanLoad { 
    constructor(private userProfileService: UserProfileService, private router: Router) { } 

    canLoad(route: Route) { 
    return this.userProfileService.isAuthorized().map(authorized => { 
     if(authorized) { 
     return authorized; 
     } else { 
     let url = `/${route.path}`; 
     this.router.navigate(['/login'], { queryParams: { redirectTo: url } }); 
     return authorized; 
     } 
    }); 
    } 

    canActivate(
    next: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
) { 
    return this.userProfileService.isAuthorized().map(authorized => { 
     if(authorized) { 
     return authorized; 
     } else { 
     this.router.navigate(['/login'], { queryParams: { redirectTo: state.url } }); 
     return authorized; 
     } 
    }); 
    } 

    canActivateChild(
    route: ActivatedRouteSnapshot, 
    state: RouterStateSnapshot 
) { 
    return this.canActivate(route, state); 
    } 
} 

を検証するために、次の実装を持っています