Angular2 - 环回 - 安全实现

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

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