标签: angular2-jwt

我正在使用Angular 2.1.2.

我有一个身份验证令牌(使用angular2-jwt),如果它到期,我的webApi调用失败,出现401错误.我正在寻找一个解决方案,用户不会丢失任何输入数据.

我可以抓住这个401并用登录打开一个模态.然后用户登录,模态消失,他们看到他们的输入屏幕.但是,失败的请求显示错误,因此我需要重新处理请求.如果是路由器导航,则初始数据未加载.

我可以重新加载页面,但如果我router.navigate到同一页面,它似乎并没有真正重新加载页面.我不想在单页面应用上进行整页重新加载.有没有办法强制router.navigate运行,即使它是当前页面？

重新导航仍然是一个问题,因为我会丢失任何未保存的新输入数据.

理想情况下,请求只是"暂停",直到用户从模态登录.我还没有找到实现这个的方法.

有任何想法吗？有最好的做法吗？

我正在努力使用rc5的angular2-jwt文档

这是我的NgModule

import { AuthHttp } from 'angular2-jwt';



 @NgModule({
  imports: [ BrowserModule, 
             routing,
             HttpModule,
             FormsModule,

            ],
  declarations: [ 
                  AppComponent,
                  LoginComponent, 
                  NavbarComponent,
                  DashboardComponent,
                  ModelsComponent
                ],
  providers: [AuthGuard,
              ModelService,
              AuthHttp
              ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

这是我的服务

import { Injectable } from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';
import { Model } from './model';
import { AuthHttp } from 'angular2-jwt';
import {Observable} from "rxjs/Rx";

@Injectable()
export class ModelService {
  private _url = "http://127.0.0.1:8050/test/model";

  constructor(private _http: Http,private …

目前，我在组件.ts文件中使用了此静态代码，但该代码无法正常工作。它返回未经授权的（401）。但是当我将令牌作为查询字符串传递时，它可以正常工作。请给出一个组件.ts文件的工作示例。

    import { HttpClient, HttpResponse ,HttpHeaders} from '@angular/common/http';


    var t=`eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC9sb2NhbGhvc3Q6ODAwMFwvYXBpXC9sb2dpbiIsImlhdCI6MTUzNzcxNTMyNSwiZXhwIjoxNTM3NzE4OTI1LCJuYmYiOjE1Mzc3MTUzMjUsImp0aSI6IlBKWVhnSkVyblQ0WjdLTDAiLCJzdWIiOjYsInBydiI6Ijg3ZTBhZjFlZjlmZDE1ODEyZmRlYzk3MTUzYTE0ZTBiMDQ3NTQ2YWEifQ.1vz5lwPlg6orzkBJijsbBNZrnFnUedsGJUs7BUs0tmM`;

    var headers_object = new HttpHeaders();
        headers_object.append('Content-Type', 'application/json');
        headers_object.append("Authorization", "Bearer " + t);

        const httpOptions = {
          headers: headers_object
        };


   this.http.post(
                  'http://localhost:8000/api/role/Post', {limit:10}, httpOptions
                 ).subscribe(resp => {
                  this.roles = console.log(resp)
                  }
                );

我正在尝试使用Auth0进行社交登录,但我不断获得未定义引用的例外.

这是身份验证服务

import { Injectable }      from '@angular/core';
import { tokenNotExpired } from 'angular2-jwt';

// Avoid name not found warnings
declare var Auth0Lock: any;

@Injectable()
export class AuthService {
// Configure Auth0

lock = new Auth0Lock('I have set the ID correctly here', 'and the domain as well', {});

constructor() {
// Add callback for lock `authenticated` event
  this.lock.on("authenticated", (authResult) => {
  localStorage.setItem('id_token', authResult.idToken);
  });
}

public login() {
// Call the show method to display the widget.
  this.lock.show();
};

public …

至少我以为我提供的正确.以下是我的app.module文件的相关片段以及我使用AuthHttp的服务.我按照自述文件中的配置创建了提供AuthHttp的工厂方法,但是在我的服务中无法识别它存在持续存在的问题.我已经阅读了有关嵌套依赖注入的文献,我觉得我正在做正确的事情.

app.module.ts

import { Http, RequestOptions } from '@angular/http';
import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt/angular2-jwt';

export function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig(), http, options);
}

@NgModule({
    declarations: [
        AppComponent,
        ButtonFormComponent,
...
imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        RouterModule,
        AppRoutingModule
    ],
    providers: [
        {
            provide: LocationStrategy,
            useClass: HashLocationStrategy
        },
        {
            provide: AuthHttp,
            useFactory: authHttpServiceFactory,
            deps: [Http, RequestOptions]
        },

employee.service.ts

import { AuthHttp } from 'angular2-jwt/angular2-jwt';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import …

在我的应用程序从Angular 4 ^迁移到Angular 6(最新版本)后,我的Auth服务中出现了一个非常奇怪的错误.

具体而言,angular2,智威汤逊,当我尝试包导致一个杀手错误"serve"或"build"在应用production环境.另一方面,相同的代码在"dev"环境中运行得非常好.

操作系统 - > MacOS 10.13.6

执行时遇到的错误ng serve --configuration production:

ERROR in : Error: Internal error: unknown identifier [{"filePath":"/Users/paulo/Projects/eleo-usuario/node_modules/angular2-jwt/angular2-jwt.d.ts","name":"AuthHttp","members":[]},{"filePath":"/Users/paulo/Projects/eleo-usuario/node_modules/@angular/common/common.d.ts","name":"LocationStrategy","members":[]}]
at Object.importExpr$$1 [as importExpr] (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21757:27)
at tokenExpr (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11810:43)
at providerDef (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11736:24)
at /Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11906:81
at Array.map (<anonymous>)
at NgModuleCompiler.compile (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:11906:48)
at AotCompiler._compileModule (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21702:36)
at /Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21621:70
at Array.forEach (<anonymous>)
at AotCompiler._compileImplFile (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21621:23)
at /Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21611:74
at Array.map (<anonymous>)
at AotCompiler.emitAllImpls (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler/bundles/compiler.umd.js:21611:39)
at AngularCompilerProgram.generateFilesForEmit (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler-cli/src/transformers/program.js:736:46)
at AngularCompilerProgram._emitRender2 (/Users/paulo/Projects/eleo-usuario/node_modules/@angular/compiler-cli/src/transformers/program.js:330:27)
at …

这看起来好像我在这里圈,也许是因为使用了这么多订阅并且必须将它们链接在一起.

我希望能够刷新令牌,如果它已使用刷新令牌过期.这就是我所拥有的,如果可能的话,我真的很感激一个简单的工作示例.

总之,我如何确保AudienceService首先检查令牌是否有效,如果没有,它会尝试使用刷新令牌刷新它,然后使用适当的令牌调用端点？

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { Http, RequestOptions } from '@angular/http';
import { ConfirmDialogModule, ListboxModule, PickListModule } from 'primeng/primeng';

import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { HomeComponent } from './components/home/home.component';
import { ListAudiencesComponent } from './components/audiences/list-audiences/list-audiences.component';

import { AudienceService } from './services/audience.service'; …

我是Angular 2的新手,我想在我的项目中使用JWT.所以我按照指示准确地从angular2-jwt的官方页面使用基本配置给出.我用以下代码创建了一个名为auth.module.ts的文件:

import { NgModule } from '@angular/core';
import { Http, RequestOptions } from '@angular/http';
import { AuthHttp, AuthConfig } from 'angular2-jwt';

function authHttpServiceFactory(http: Http, options: RequestOptions) {
  return new AuthHttp(new AuthConfig(), http, options);
}

@NgModule({
  providers: [
    {
      provide: AuthHttp,
      useFactory: authHttpServiceFactory,
      deps: [Http, RequestOptions]
    }
  ]
})
export class AuthModule {}

下一步是发送经过身份验证的请求.我使用一个组件,我放置一个按钮,调用一个函数来执行页面上建议的代码:

文件:calendario.components.ts

import {Component, OnInit,trigger,state,style,transition,animate,keyframes, group} from '@angular/core';
import initDemo = require('../../../assets/js/charts.js');
import initNotify = require('../../../assets/js/notify.js');
import { AuthHttp } from 'angular2-jwt';

declare var $:any; …

我在用 JWT 生成的令牌中有以下有用的负载

{ "sub": "flamelsoft@gmail.com", "jti": "0bca1034-f3ce-4f72-bd91-65c1a61924c4", " http://schemas.microsoft.com/ws/2008/06/identity/claims/角色":"管理员","exp":1509480891,"iss":" http://localhost:40528 ","aud":" http://localhost:40528 "}

使用此代码 Startup.cs

        public void ConfigureServices(IServiceCollection services)
    {
        services.AddDbContext<DBContextSCM>(options =>
        options.UseMySql(Configuration.GetConnectionString("DefaultConnection"), b =>
         b.MigrationsAssembly("FlamelsoftSCM")));

        services.AddIdentity<User, Role>()
            .AddEntityFrameworkStores<DBContextSCM>()
            .AddDefaultTokenProviders();

        services.AddScoped(typeof(IRepository<>), typeof(Repository<>));

        services.AddAuthentication()
             .AddJwtBearer(cfg =>
             {
                 cfg.RequireHttpsMetadata = false;
                 cfg.SaveToken = true;

                 cfg.TokenValidationParameters = new TokenValidationParameters()
                 {
                     ValidIssuer = Configuration["Tokens:Issuer"],
                     ValidAudience = Configuration["Tokens:Issuer"],
                     IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Tokens:Key"]))
                 };

             });

        services.AddMvc();
    }

账户控制器.cs

        [HttpPost]
    [Authorize(Roles="Administrator")]
    public async Task<IActionResult> Register([FromBody]RegisterModel model)
    {
        try
        {
            var user = new User { …