angular 4 primeng 上传 url windows 认证cookie
angular 4 primeng upload url windows authentication cookie
我正在使用 PrimeNg 的文件上传,并且为我的 API 启用了 windows 身份验证。现在 url 是通过使用 model.id 的构造函数生成的,并且 url 变为
我还在我的组件中应用了 authGuard 以添加 cookie。
Routes.ts
const routes: Routes = [
{
path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard]
},
{ path: 'factory', component: FactoryFormComponent, canActivate: [AuthGuard]},
{ path: 'factory/:id', component: FactoryFormComponent, canActivate: [AuthGuard] },
{ path: 'supplier', component: SupplierFormComponent, canActivate: [AuthGuard] },
{ path: 'supplier/:id', component: SupplierFormComponent, canActivate: [AuthGuard] },
{ path: 'businessarea', component: BusinessAreaFormComponent, canActivate: [AuthGuard] },
{ path: 'businessarea/:id', component: BusinessAreaFormComponent, canActivate: [AuthGuard] },
{ path: 'document/:id/Upload', component: EventFormComponent, canActivate: [AuthGuard] }
];
HTML code
<div *ngIf="model.id">
<p-fileUpload name={{model.id}} url={{documentUploadUrl}} (onUpload)="onUpload($event)" (onError)="onError($event)"
multiple="multiple" accept=".txt" maxFileSize="10000000">
<template pTemplate type="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</template>
</p-fileUpload>
</div>
packages.json
"@angular/animations": "^4.1.1",
"@angular/common": "^4.1.1",
"@angular/compiler": "^4.1.1",
"@angular/core": "^4.1.1",
"@angular/forms": "^4.1.1",
"@angular/http": "^4.1.1",
"@angular/platform-browser": "^4.1.1",
"@angular/platform-browser-dynamic": "^4.1.1",
"@angular/router": "^4.0.0",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"ng2-completer": "^0.2.2",
"primeng": "^4.0.0",
"rxjs": "^5.3.0",
"zone.js": "0.8.5"
当我尝试上传时出现 401 未经授权的错误。欢迎任何建议。
编辑:我可以看到在发送上传控制器请求时没有设置 cookie 但对于其他 urls 我可以看到名为“ASP.NET_SessionId”。我怀疑 fileupload 没有为 windowsauth.
添加 cookie 的机制
编辑 2:我已经编写了自己的 httpclient,我用它来添加 cookie,是否可以通过它调用它?
httpclient.ts
@Injectable()
export class HttpClient extends Http {
constructor(backend: ConnectionBackend,
defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs): Observable<any> {
return super.get(url, this.AddCustomOptions(options));
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
return super.post(url, body, this.AddCustomOptions(options));
}
put(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
return super.put(url, body, this.AddCustomOptions(options));
}
private AddCustomOptions(options: RequestOptionsArgs): RequestOptionsArgs {
if (options)
options.withCredentials = true;
else
options = new RequestOptions({
withCredentials: true
});
return options;
}
}
我已经修复了 Primeng 组件并打开了拉取请求。
https://github.com/primefaces/primeng/issues/2745
引入了名为 withCredentials 的新 属性 来修复它。
我正在使用 PrimeNg 的文件上传,并且为我的 API 启用了 windows 身份验证。现在 url 是通过使用 model.id 的构造函数生成的,并且 url 变为
我还在我的组件中应用了 authGuard 以添加 cookie。
Routes.ts
const routes: Routes = [
{
path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuard]
},
{ path: 'factory', component: FactoryFormComponent, canActivate: [AuthGuard]},
{ path: 'factory/:id', component: FactoryFormComponent, canActivate: [AuthGuard] },
{ path: 'supplier', component: SupplierFormComponent, canActivate: [AuthGuard] },
{ path: 'supplier/:id', component: SupplierFormComponent, canActivate: [AuthGuard] },
{ path: 'businessarea', component: BusinessAreaFormComponent, canActivate: [AuthGuard] },
{ path: 'businessarea/:id', component: BusinessAreaFormComponent, canActivate: [AuthGuard] },
{ path: 'document/:id/Upload', component: EventFormComponent, canActivate: [AuthGuard] }
];
HTML code
<div *ngIf="model.id">
<p-fileUpload name={{model.id}} url={{documentUploadUrl}} (onUpload)="onUpload($event)" (onError)="onError($event)"
multiple="multiple" accept=".txt" maxFileSize="10000000">
<template pTemplate type="content">
<ul *ngIf="uploadedFiles.length">
<li *ngFor="let file of uploadedFiles">{{file.name}} - {{file.size}} bytes</li>
</ul>
</template>
</p-fileUpload>
</div>
packages.json
"@angular/animations": "^4.1.1",
"@angular/common": "^4.1.1",
"@angular/compiler": "^4.1.1",
"@angular/core": "^4.1.1",
"@angular/forms": "^4.1.1",
"@angular/http": "^4.1.1",
"@angular/platform-browser": "^4.1.1",
"@angular/platform-browser-dynamic": "^4.1.1",
"@angular/router": "^4.0.0",
"bootstrap": "3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.6.3",
"ng2-completer": "^0.2.2",
"primeng": "^4.0.0",
"rxjs": "^5.3.0",
"zone.js": "0.8.5"
当我尝试上传时出现 401 未经授权的错误。欢迎任何建议。
编辑:我可以看到在发送上传控制器请求时没有设置 cookie 但对于其他 urls 我可以看到名为“ASP.NET_SessionId”。我怀疑 fileupload 没有为 windowsauth.
添加 cookie 的机制编辑 2:我已经编写了自己的 httpclient,我用它来添加 cookie,是否可以通过它调用它?
httpclient.ts
@Injectable()
export class HttpClient extends Http {
constructor(backend: ConnectionBackend,
defaultOptions: RequestOptions) {
super(backend, defaultOptions);
}
get(url: string, options?: RequestOptionsArgs): Observable<any> {
return super.get(url, this.AddCustomOptions(options));
}
post(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
return super.post(url, body, this.AddCustomOptions(options));
}
put(url: string, body: any, options?: RequestOptionsArgs): Observable<any> {
return super.put(url, body, this.AddCustomOptions(options));
}
private AddCustomOptions(options: RequestOptionsArgs): RequestOptionsArgs {
if (options)
options.withCredentials = true;
else
options = new RequestOptions({
withCredentials: true
});
return options;
}
}
我已经修复了 Primeng 组件并打开了拉取请求。
https://github.com/primefaces/primeng/issues/2745
引入了名为 withCredentials 的新 属性 来修复它。