Angular2 -回溯-Security实现

Question

在一个角度回溯项目中，我们能做的安全实现是什么？头盔是否已经在环回中实现了？

Answer 1

因此，为了让您的生活更加轻松，我建议您看看@mean/循环往复-sdk-builder，它将自动创建一个模块，以便导入到您的应用程序中，为您提供您的API端点所需的所有服务。

现在，对于以角表示的安全实现，我建议编写路由保护程序，并延迟加载路由。下面是我的一个应用程序中有一个路由保护的例子

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构建器的服务将需要它！)

最后要看的是将应该被保护的路由迁移到它们自己的模块中。这样做将允许我们只在需要的时候延迟加载这些组件！(而不是在应用程序一加载就进来)。这需要更多的工作，所以我建议看一下这个Rangle.io指南。