Angular2 - Loopback - 安全實現

Question

什麼是我們可以在Angular-Loopback項目中執行的安全實現。 頭盔是否已在環回中實施？

Answer 1

所以，爲了讓您的生活更輕鬆一點，我建議您看看@mean-expert/loopback-sdk-builder，它會自動創建一個模塊導入到您的應用程序中，爲您提供所需的API端點服務。

現在，對於我們在Angular中的安全實現，我會建議寫出路由守衛，並延遲加載您的路由。這裏是一個路由守護我在我的應用程序

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，以及需要用戶驗證我們的API端點，我們可以從我們的新崛起的用戶的服務使用令牌ID（從SDK構建的服務需要它！）

你要看的最後一件事是將你應該保護的路線遷移到他們自己的模塊中。這樣做只會讓我們只在需要時纔會延遲加載這些組件！ （而不是在應用程序加載後立即進入）。這將需要更多的作品，所以我建議看看這個guide from Rangle.io。