Проблема с положением API в приложении среднего стека, но нормально работает в почтальоне

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 я звоню API в activAccount. 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

Когда я нажимаю на API от Почтальон , когда в конце после активации есть токен, он работает нормально и отправляет мне ответ в формате json, например:

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

но когда я звоню из моего углового приложения, это не работает.

На самом деле, когда пользователь регистрирует учетную запись, я отправляю email на электронную почту пользователя, и я хочу, чтобы, когда пользователь нажимал на ссылку, которую он / она получит в электронном письме, изменит активное поле в схема в true, которое было false в начале. когда я нажимаю api от почтальона, он устанавливает его в true, что означает, что backend API работает нормально, но метод вызова api из angular не годится.

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) => {
   ...
});

Но вы лучше узнаете, как добавлять токен в заголовки и как управлять им в API с помощью passportJS .