Question

我删除了 AuthenticationHeader ，它仍然无法正常工作，因为我的本地主机中没有令牌，我只是激活电子邮件并尝试了许多解决方案，但无法解决。

ActivateComponent.ts：

export class ActivateComponent implements OnInit {

  currentUrl;
  constructor(
    private _auth: AuthService, 
    private activatedRoute: ActivatedRoute, 
    private _router: Router
  ) {}

  ngOnInit() {
    console.log("activate component's ngOnInIt loaded");
    this.currentUrl = this.activatedRoute.snapshot.params;
    console.log(this.currentUrl.token);
    this._auth.activateAccount(this.currentUrl.token);
  }
}

在AuthService中，我正在ActivateAccount中调用 API 。 AuthService：

import { Injectable } from '@angular/core';
import {Http, Headers, RequestOptions, Response} from '@angular/http';
import { tokenNotExpired } from 'angular2-jwt';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {

  authToken;
  user;
  options;
  domain = "http://localhost:8080/";

  constructor(private _http: Http) {

  }

  createAuthenticationHeaders() {
    this.loadToken();
    this.options = new RequestOptions({
      headers: new Headers({
        'Content-Type': 'application/json',
        'authorization': this.authToken
      })
    });
  }

  loadToken() {
    const token = localStorage.getItem('token');
    this.authToken = token;
  }


  activateAccount(token) {
    this.createAuthenticationHeaders();
    return this._http.put(this.domain + 'authentication/activate/' + token, this.options).map(res => res.json());
  }

}

身份验证API：

http://localhost:8080/authentication/activate/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6ImJha2FyIiwiZW1haWwiOiJiYWthcm9wc3RAZ21haWwuY29tIiwiaWF0IjoxNTM2MDY0MDQ3fQ.6rONcRU5RwCMaZfAiQe0sWiJ4o1DyrvP5RT5YGnjH-w

当我从 postman 中点击此 api 时，激活后最后有令牌时，它工作正常，并以json格式向我发送响应，例如：

{
    "success": true,
    "message": "Account Activate"
}

但是当我从我的有角度的应用程序中调用它时，它是行不通的。

实际上，当用户注册帐户时，我正在向用户电子邮件发送电子邮件，我希望当用户单击他/她在电子邮件中接收的链接时，该链接会更改架构中的活动字段为true，开始时为 false 。当我从邮递员点击api时，将其设置为true，这意味着后端API可以正常工作，但是从angular调用api的方法不好。

router.put('/activate/:token', (req, res) => {

  User.findOne({
    temporarytoken: req.params.token
  }, (err, user) => {
    if (err) {
      res.json({
        success: false,
        message: 'Token is invalid'
      });
    } else {
      var token = req.params.token;
      jwt.verify(token, config.secret, (err, decoded) => {
        if (err) {
          res.json({
            success: false,
            message: 'Error during verification'
          });
        } else if (!user) {
          res.json({
            success: false,
            message: 'Activation link expired'
          });
        } else {
          user.temporarytoken = false;
          user.active = true;
          user.save((err) => {
            if (err) {
              console.log(err);
            } else {
              output = `
                                    Hello <strong> ${user.username} </strong>,
                                    <br> <br> Your Account has been Scuessfully Activated!.
                                    `;
              var email = {
                from: 'Localhost Staff, staff@localhost.com',
                to: user.email,
                subject: 'Localhost Account Activated',
                text: `Hello <strong> ${user.username} </strong>,
                                        <br> <br> Your Account has been Scuessfully Activated!.`,
                html: output
              };

              client.sendMail(email, function(err, info) {
                if (err) {
                  console.log(error);
                } else {
                  console.log('Message sent: ' + info.response);
                }
              });
              res.json({
                success: true,
                message: 'Account Activate'
              });
            }
          });
        }
      });
    }
  });
});

Answer 1

您要同时在标题和url中提供令牌。你不应该。在您的情况下（取决于您的API），您不需要在标头中添加令牌，因为您的API不在等待令牌。而且，您最好使用GET而不是PUT。前端更改自：

createAuthenticationHeaders() {
   this.loadToken(); // <- To remove
   this.options = new RequestOptions({
     headers: new Headers({
       'Content-Type': 'application/json',
       'authorization': this.authToken  // <- To remove
     })
   });
}


activateAccount(token) {
  this.createAuthenticationHeaders();
  // To change from PUT to GET
  return this._http
             .put(this.domain + 'authentication/activate/' + token, this.options)
             .map(res => res.json());
}

收件人：

 createAuthenticationHeaders() {
   this.options = new RequestOptions({
     headers: new Headers({
       'Content-Type': 'application/json'
     })
   });
}


activateAccount(token) {
  this.createAuthenticationHeaders();
  return this._http
             .get(this.domain + 'authentication/activate/' + token, this.options)
             .map(res => res.json());
}

还要从以下位置更改您的API：

router.put('/activate/:token', (req, res) => {
   ...
});

收件人：

router.get('/activate/:token', (req, res) => {
   ...
});

但是您将更好地学习如何向标头添加令牌以及如何使用passportJS在API中管理令牌。

在平均堆栈应用程序中放置API的问题，但在邮递员中工作正常

1 个答案: