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处理令牌的缓存，对于需要用户身份验证的API端点，我们可以使用新创建的用户服务中的令牌ID（SDK构建器中的服务需要它！）< / p>

您最不希望看到的是将受保护的路由迁移到自己的模块中。这样做只允许我们在需要时延迟加载这些组件！（而不是他们在应用加载后立即进入）。这将需要更多的工作，所以我建议看一下这个guide from Rangle.io。

Angular2 - Loopback -Security实现

1 个答案: