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。