javascript - 将 token 传递到我的 Angular 4 应用程序的优雅方式是什么？

Question

我有以下实现:

前端:localhost:4200(这是 Angular 应用程序)

后端:localhost:3000(这是我在 Node.js 和 Express 上运行的 REST API)

--

第 1 步。在 Angular 应用程序中，用户单击一个链接，将他重定向到我的 REST API (localhost:3000/auth/steam)。

第 2 步。我的 REST API 将他重定向到他登录的 OpenID 提供商 (Steam)。

步骤 3. 成功登录后，OpenID 提供商会将用户连同用户数据重定向回我的后端服务器。我的后端服务器将此数据保存在数据库中，并创建包含用户数据的 JWT(JSON Web token )。

步骤 4. 将用户与 token 一起重定向到前端...

在这部分，我真的不知道执行此操作的优雅方式是什么。我考虑将 token 作为 URL 参数传递 (?token=...)，但这有点不安全，因为 token 在 URL 中可见。

有更好的方法吗？谢谢:)

Answer 1

我认为最好的方法是在Http headers中发送它。最好的方法是使用 HttpClientModule 来处理 http 请求。此外，该模块还通过以下方式提供了拦截器功能:

providers: [
      ...
      { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
]

export class AuthInterceptor implements HttpInterceptor {
    constructor(private authService: AuthService) {}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const copy = req.clone({headers: req.headers.set('Authorization', this.authService.getToken())});
        return next.handle(copy);
    }
}