Question

我在localhost：3000上有rails BE应用程序，在localhost：4200上有FE。我试图让令牌验证自动完成，我理解这是通过在_tokenService.validateToken（）方法中设置和检索localStorage来实现的。

问题似乎是，一旦我登录（成功），我在浏览器中查看了我的localStorage，发现没有保存。因此，当我刷新页面时，没有localStorage作为我的validateToken（）方法的一部分进行验证，因此，会话不会在浏览器上维护。

我在这里缺少什么？我初始化这个命令的方式有错吗？我是否每次都需要手动设置localStorage？如果是这样，怎么样？

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Angular2TokenService, SignInData } from 'angular2-token';

@Component({
    selector: 'sign-in',
    templateUrl: 'sign-in.component.html'
})
export class SignInComponent {

    private _signInData: SignInData = <SignInData>{};
    private _output: any;

    constructor(private _tokenService: Angular2TokenService) { }

    // Submit Data to Backend
    onSubmit() {

        this._output = null;

        this._tokenService.signIn(this._signInData).subscribe(
            res => {
                this._signInData    = <SignInData>{};
                this._output        = res;
            }, error => {
                this._signInData    = <SignInData>{};
                this._output        = error;
            }
        );
    }
}

登录in.component.ts

XPath

Answer 1

我知道它很旧，但是对于仍在寻找它的所有Rails用户，您需要告诉Rails应用程序公开必要的标头。否则，您的客户端应用程序将无法读取它们，并且如果无法读取，则无法将其写入您的localStorage。

为此，请转到位于/config/application.rb的应用程序模块

这是您应该定义CORS策略的地方。（如果未设置，则应先进行设置，请参见：https://github.com/cyu/rack-cors）。

ressource模块的Rack::Cors方法允许您传递“ expose”参数，以明确告知Rails应用程序将特定的标头公开给客户端。这里我们需要几个：

访问令牌
客户
到期
令牌类型
uid

在这里我不会详细介绍它们，但是您需要所有它们。公开这些标头后，您的客户端应用程序将能够读取它们，而angular2-token库将能够在您的localStorage中对其进行设置。

/config/application.rb的代码示例

module MyAwesomeRailsApp
  class Application < Rails::Application
    # possibly some code and comments and then:
    config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :options],
                 expose: ['access-token', 'client', 'expiry','token-type', 'uid'] 
      end
    end
  end
end

当然，您可能希望将策略限制为一个或几个域，而不是整个域。您可能还希望/需要向methods数组添加更多动词（例如:delete，:put等），但这是另一个主题。

由于库已更改，您可能很难解决这个问题，但实际上您可以在以下版本的github存储库（似乎与该确切的帖子相对应）中找到此信息：https://github.com/neroniaky/angular-token/issues/198#issuecomment-349914649

顺便说一下，新版gem的文档在这一点上仍然有效：https://devise-token-auth.gitbook.io/devise-token-auth/config/cors

希望获得帮助。

Answer 2

经过大量搜索和反复试验，解决方案是为特定路线设置代理。这可以通过在角度应用程序的根目录中添加以下文件来完成

proxy.config.json

{
  "/auth": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

也包含在您的

中

的package.json

{
..
..
  "scripts": {
  ...
  ...
  "start": "ng serve  --proxy-config proxy.conf.json",
  ...
  ...
  }
..
..
}

这个问题从根本上说，发送的响应标头没有通过以下命令分配给我的浏览器localStorage

this._tokenService.init({apiBase:'http://localhost:3000'});

将此更改回

this._tokenService.init();

而是将所有请求通过angular2-token中设置的/ auth默认路由通过代理请求路由到相应的rails路由。

当我在_tokenService.init（）上设置apiBase时，为什么没有设置Angular2令牌localStorage？

2 个答案: