如何使用回送框架和SDK生成器客户端实现重置密码?

时间:2019-04-11 14:33:55

标签: angular loopbackjs

我创建了以下表单来收集电子邮件信息以重置密码:

<div class="container-scroller background-picture">
<div class="container-fluid page-body-wrapper full-page-wrapper">
  <div class="content-wrapper d-flex align-items-center auth login-full-bg">
      <!-- <div class="row w-100"> -->
      <div class="col-lg-6 mx-auto">
          <div class="auth-form-dark text-left p-5">
              <h2 i18n="@@RESETPASSWORD">RESETPASSWORD</h2>
              <form name="form-signin" (ngSubmit)="f.form.valid && resetPwd()" #f="ngForm" novalidate>
                  <span id="reauth-email" class="reauth-email"></span>
                  <div class="form-group">
                      <label for="mail" i18n="@@email">EMAIL</label>
                      <input type="text" class="form-control" id="mail" name="email" [(ngModel)]="user.email"
                             #mail="ngModel" required/>
                  </div>
                  <div class="mt-5">
                    <button class="btn btn-lg btn-warning btn-block btn-signin font-weight-medium"
                            type="submit" i18n="@@RESETPASSWORDDEMAND">RESETPASSWORDDEMAND
                    </button>
                  </div>
                  <div class="mt-3 text-center" style="margin-top:15px">
                    <a [routerLink]="['/login']" class="auth-link text-white" i18n>BACK</a>
                  </div>
              </form>
              <!-- </div> -->
          </div>
      </div>
  </div>

并且我使用 mean-sdk-builder 生成的sdk创建了以下组件:

import { Component, OnInit } from '@angular/core';
import { Client, AccessToken } from '../shared/sdk/models';
import { ClientApi } from '../shared/sdk/services';
import { Router } from '@angular/router';

@Component({
  selector: 'app-password-reset',
  templateUrl: './password-reset.component.html',
  styleUrls: ['./password-reset.component.css']
})
 export class PasswordResetComponent implements OnInit {

  public user: Client = new Client();

  constructor(
      private clientApi: ClientApi,
      private router: Router
  ) {

 }

  ngOnInit() {}

  resetPwd() {
    this.clientApi.resetPassword(this.user.email).subscribe(
      () => this.router.navigate(['/login']),
      err => this.router.navigate(['/resetFailed'])
  );
}
}

提交表单时出现400错误:

debug headers

debug preview

这是server.js代码:

 var loopback = require('loopback');
 var boot = require('loopback-boot');
 var path = require('path');
 var bodyParser = require('body-parser');
 var app = module.exports = loopback();

// configure view handler
 app.set('view engine', 'ejs');
 app.set('views', path.join(__dirname, 'views'));

// configure body parser for http session
 app.use(bodyParser.urlencoded({ extended: true }));

// Set the server render engine
 app.set('view engine', 'ejs');

 app.all('/category', function (req, res) {
   res.sendFile('../client/index.html');
});

 app.start = function () {
  // start the web server
   return app.listen(function () {
     app.emit('started');
     var baseUrl = app.get('url').replace(/\/$/, '');
     console.log('Web server listening at: %s', baseUrl);
     if (app.get('loopback-component-explorer')) {
      var explorerPath = app.get('loopback-component-          explorer').mountPath;
      console.log('Browse your REST API at %s%s', baseUrl, explorerPath);
    }
  });
};

// Bootstrap the application, configure models, datasources and middleware.
// Sub-apps like REST API are mounted via boot scripts.

 boot(app, __dirname, function (err) {
  if (err) throw err;

  // start the server if `$ node server.js`
  if (require.main === module)
    app.start();
});

这是请求: Request

请问有什么主意吗?我不太明白会发生什么。

在此先感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

我将假设Clients是您的Users模型的扩展模型。在这种情况下,API的Clients/reset端点接受一个内联对象,其属性为“ email”。

因此,在您的情况下,您需要更改resetPwd方法以反映此情况,即:

resetPwd() {
    this.clientApi.resetPassword({ email: this.user.email }).subscribe(
      () => this.router.navigate(['/login']),
      err => this.router.navigate(['/resetFailed'])
  );

这说明了为什么您收到有关意外令牌的错误的原因,因为当resetPassword函数需要一个对象时,您正在传递字符串('philippe-correges@io-software.com')。位置0处的预期令牌应为{,但您传入的是p

我希望这会有所帮助。