使用Auth0更新用户信息

时间:2016-09-08 19:15:10

标签: angular auth0

好的,我正在尝试使用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>

提前感谢任何信息!

0 个答案:

没有答案