2017-06-13 11 views

答えて

1

ちょっとあなたの人生を少し楽にするために、@mean-expert/loopback-sdk-builderをご覧になることをお勧めします。アプリケーションにインポートするモジュールが自動的に作成され、APIエンドポイントに必要なすべてのサービスが提供されます。

Angularのセキュリティ実装では、ルートガードを作成し、ルートを遅延ロードすることをおすすめします。ここでは私のアプリケーションの1

import { Injectable } from '@angular/core'; 
import { CanActivate, Router } from '@angular/router'; 
import { Observable, Subscription } from 'rxjs'; 

import { UserService } from '../services/user.service'; 

@Injectable() 
export class UserGuard implements CanActivate { 
    private _user: any; 
    private _userSubscription: Subscription; 

    constructor(private _router: Router, private _userService: UserService) { 
    this._userSubscription = this._userService.user.subscribe((user: any) => { 
     this._user = user; 
    }); 
    } 

    canActivate(): boolean { 
    if (this._user) { 
     return true; 
    } 
    this._router.navigate(['/', 'sign-in']); 
    return false; 
    } 
} 

に私が持っているルートガードの一例である私はまた、SDKビルダーが私のために作られたアカウント/ユーザーサービスを使用するカスタム・ユーザー・サービスを提供しています。

import { Injectable, Inject } from '@angular/core'; 
import { BehaviorSubject, Observable } from 'rxjs'; 

import { User, SDKToken } from '../sdk/models'; 
import { UserApi, LoopBackAuth } from '../sdk/services'; 

@Injectable() 
export class UserService { 
    private _user: BehaviorSubject<any> = new BehaviorSubject<any>(null); 

    constructor(private _userApi: UserApi, @Inject(LoopBackAuth) protected auth: LoopBackAuth) { 
    this._restoreUser(); 
    } 

    get user(): Observable<any> { 
    return this._user.asObservable(); 
    } 

    private _restoreUser(): void { 
    this._user.next(this.auth.getCurrentUserData()); 
    } 

    public signIn(user: User, callback?: any): void { 
    this._userApi.login(user).subscribe((token: SDKToken) => { 
     this.auth.save(); 
     const user: any = this.auth.getCurrentUserData(); 
     this._user.next(user); 
     if (callback) { 
     callback(null, user); 
     } 
    }, (error: any) => { 
     if (callback) { 
     callback(error.message, null); 
     } 
    }); 
    } 

    public signOut(callback?: any): void { 
    try { 
     this._userApi.logout().subscribe(); 
    } catch (e) { } 
    this.auth.clear(); 
    this._user.next(null); 
    if (callback) { 
     callback(null, true); 
    } 
    } 

    public signUp(user: User, callback?: any): void { 
    this._userApi.create(user).subscribe((account: any) => { 
     if (callback) { 
     callback(null, account); 
     } 
    }, (error: any) => { 
     if (callback) { 
     callback(error.message, null); 
     } 
    }); 
    } 
} 

私たちは、SDK Builderは、私たちのトークンのcacheingを処理できるように、そして私たちは、新たに鋳造ユーザサービスからトークンIDを使用することができ、ユーザー認証を必要とする私たちのAPIエンドポイントの(SDKビルダーからのサービスが必要になりますそれ!)

最後に、保護されたルートを自分のモジュールに移行する必要があります。そうすることで、必要なときにのみそれらのコンポーネントを怠けることができます! (むしろ、アプリが読み込まれるとすぐに入ってくる)。これにはもう少し作業が必要なので、このguide from Rangle.ioを見てみることをおすすめします。

+0

XSS、Click Jackingなどの攻撃に対する予防策はどうですか? –

+0

Angularが信頼できないソースから取り込まれたコード/入力を持っている場合、Angularは信頼できない値をサニタイズしエスケープします。 ([自分のウェブサイトから](https://angular.io/guide/security#xss)) – MichaelSolati

関連する問題