好的,我正在尝试使用Auth0来更新用户个人资料地址信息。我的问题是,我在URL中看到了值传递,如http://localhost:3000/profile/edit?address=12345%2Brandom%2Bln
,但在点击提交后,它实际上并未更新或导航回配置文件页面。以下是我的一些代码:
editprofile.component
import { Component } from '@angular/core';
import { Auth } from './auth.service';
import { AuthHttp, provideAuth} from 'angular2-jwt';
import { Http, HttpModule } from '@angular/http';
import { Router } from '@angular/router';
import 'rxjs/add/operator/map';
@Component({
templateUrl: `./app/html/editprofile.html`,
styleUrls: ['./app/css/editprofile.css'],
providers: [Auth, AuthHttp,provideAuth({
headerName: 'Authorization',
headerPrefix: 'bearer',
tokenName: 'token',
tokenGetter: (() => localStorage.getItem('id_token')),
globalHeaders: [{ 'Content-Type': 'application/json' }],
noJwtError: true
})]
})
export class EditProfileComponent {
address: String
constructor(private auth: Auth, private authHttp: AuthHttp, private router: Router) {
if(auth.userProfile.user_metadata && auth.userProfile.user_metadata.address){
this.address = auth.userProfile.user_metadata.address;
}
}
onSubmit() {
var headers: any = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
var data: any = JSON.stringify({
user_metadata: {
address: this.address
}
});
this.authHttp
.patch('https://' + 'mydomain.auth0.com' + '/api/v2/users/' + this.auth.userProfile.user_id, data, {headers: headers})
.map(response => response.json())
.subscribe(
response => {
this.auth.userProfile = response;
localStorage.setItem('profile', JSON.stringify(response));
this.router.navigate(['/profile']);
},
error => alert(error.json().message)
);
}
}
editprofile.html
<div *ngIf="auth.authenticated() && auth.userProfile">
<div class="row">
<div class="col-md-6">
<h3>Profile</h3>
<img [src]="auth.userProfile.picture" alt="" class="profile-img">
<form (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="name">Address</label>
<input type="text" class="form-control" [(ngModel)]="address" name="address" placeholder="Enter address">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
然后它被传递给profile.component,这里是HTML:
profile.html
<div *ngIf="auth.authenticated() && auth.userProfile">
<div class="row">
<div class="col-md-6">
<h3>Profile</h3>
<img [src]="auth.userProfile.picture" alt="" class="profile-img">
<p><strong>Name: </strong> {{auth.userProfile.name}}</p>
<p><strong>Email: </strong> {{auth.userProfile.email}}</p>
<p><strong>Nickname: </strong> {{auth.userProfile.nickname}}</p>
<p><strong>Created At: </strong> {{auth.userProfile.created_at}}</p>
<p><strong>Updated At: </strong> {{auth.userProfile.updated_at}}</p>
<p><strong>Address: </strong> {{auth.userProfile.user_metadata.address}}</p>
</div>
</div>
<button class="btn btn-primary btn-margin" [routerLink]="['/profile/edit']">Edit Profile</button>
提前感谢任何信息!