angular 4 primeng 上传 url windows 认证cookie

angular 4 primeng upload url windows authentication cookie

我正在使用 PrimeNg 的文件上传,并且为我的 API 启用了 windows 身份验证。现在 url 是通过使用 model.id 的构造函数生成的,并且 url 变为

http://localhost:5200/api/v1/document/:id/Upload

我还在我的组件中应用了 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 的新 属性 来修复它。