好吧,为了保护您的端点,您必须首先选择如何签署您的呼叫并确保它们安全的策略。一种常见的方法是使用 JWT 令牌。(还有其他选择,我为您提供我最熟悉的一种)。
这将要求用户使用他们的凭据联系您后端的端点,不安全。您需要配置您的后端,它将检查凭据,如果它们是正确的,后端会给您一个令牌,您将使用它来签署您的安全调用(使用 JWT,您将此令牌放在您的标头中,如果您后端配置正确,它将在安全 API 上检查此令牌)。
由于我们不知道您使用什么后端,我只能向您推荐一个 JWT 令牌库,用于您的前端。https://github.com/auth0/angular-jwt
该库将为您提供一个 http 客户端,如果您在本地存储了一个令牌,它将自动使用令牌签署您的请求。它还允许您在前端 url 上设置防护,例如,它还会自动检查存储的令牌是否未过期。
工作流程如下:
1) 用户向后端发送凭据
2) 后端确认凭据并发回令牌
3)您将令牌存储在前端的本地存储中,并配置库以使用它。
4) 对安全 URL 设置保护,作为对您是否拥有未过期令牌的预检查。
5) 最后使用库的 HTTP 客户端,它将使用您存储在本地存储中的令牌对您的请求进行签名,这将是使用您的安全 API 所必需的。
编辑:
我有一个在 Angular 中使用 JWT 令牌的基本模板。你可以在这里找到它https://github.com/BusschaertTanguy/angular2_template/。
在 auth 模块中查找配置、登录和注册组件、用于安全 http 客户端的 http 客户端、用于令牌处理和路由保护的 auth 和 auth-guard 服务。
模板中的一些快速片段可以帮助您:
//Library Configuration
export function authHttpServiceFactory(
http: Http,
options: RequestOptions
) {
return new AuthHttp(
new AuthConfig({
tokenName: 'token',
tokenGetter: (() => localStorage.getItem('token')),
globalHeaders: [{ 'Content-Type': 'application/json' }]
}),
http,
options
);
}
@NgModule({
providers: [{
provide: AuthHttp,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions]
}]
})
export class AuthModule { }
//HttpService
get(url: string): Observable<any> {
return this.http.get(endpoint).map(data => data.json());
}
//LoginComponent
login() {
this.httpService.get(urlToLogin).subscribe(
data => {
localStorage.setItem('token', data.access_token);
}
);
}
这些是查找前端配置的地方,您也可以按照库页面上的教程进行操作,因为这是我实现它的方式,只是我在这里和那里添加了一些抽象,只是为了让您知道从哪里开始。