Angular: JWT 令牌在 Postman 上可以正常工作，但在我的应用程序中却不行

Question

I'm a bit of a beginner with Angular so please bear with me.

I have a simple app which allows people to register, login and retrieve their own user data (which is the part I am stuck at).

Backend user.routes.js :

const auth = require('./middlewares/auth')

module.exports = (app) => {
    const user = require('./user.controller.js');

    app.post('/login', user.login);
    app.post('/register', user.register);
    app.get('/getuser', auth, user.getuser);
}

Backend user.controller.js :

exports.getuser = async (req, res, next) => {
  let user

  try {
    user = await User.findById(req.payload._id)
  } catch (err) {
    next(new InternalServerError('Could not fetch user', err))
    return
  }

  if (!user) {
    next(new NotFoundError('User not found'))
    return
  }

  res.json(
    pick(user, [
      'email',
      'firstName',
      'lastName',
      'accountType'
    ])
  )
}

Backend user.service.ts :

@Injectable()
export class UserService {
  private _isLoggedIn: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public readonly isLoggedIn$ = this._isLoggedIn.asObservable();

  constructor(private http: HttpClient) {
    this._isLoggedIn.next(this.isLoggedIn());
  }

  login(
    email: string,
    password: string,
    rememberMe = false
  ): Observable<boolean | any> {
    return this.http
      .post<LoginResponse>('http://localhost:3001/login', { email, password })
      .map(res => {
        setToken(res.token, rememberMe);
        this._isLoggedIn.next(true);
        return true;
      })
      .catch(this.handleError);
  }

  register(
    email: string,
    password: string,
    lastName: string,
    firstName: string
  ): Observable<boolean | any> {
    return this.http
      .post<LoginResponse>('http://localhost:3001/register', {
        email,
        password,
        lastName,
        firstName
      })
      .map(res => {
        setToken(res.token);
        return true;
      })
      .catch(this.handleError);
  }

  logout() {
    removeToken();
  }

  isLoggedIn() {
    return tokenNotExpired();
  }

  getProfile() {
    return this.http.get<Profile>('http://localhost:3001/getuser');
  }

And finally, my backend auth.js :

// Dependencies
import { JwtHelperService } from '@auth0/angular-jwt';

// Angular
import {
  HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest
} from '@angular/common/http';
import { Injectable } from '@angular/core';

// RXJS
import { Observable } from 'rxjs/Observable';

// Environment
import { DecodedToken } from './decoded-token';

// Services
const helper = new JwtHelperService();

// Constants
export const TOKEN_NAME = 'access_token';

// Exports
export function getToken(storage = null) {
  if (storage) {
    const token = storage.getItem(TOKEN_NAME);
    if (token && !helper.isTokenExpired(token)) {
      return token;
    }
    removeToken(storage);
    return null;
  }

  return getToken(localStorage) || getToken(sessionStorage);
}

export function setToken(token: string, rememberMe = false) {
  const storage = rememberMe ? localStorage : sessionStorage;

  storage.setItem(TOKEN_NAME, token);
}

export function removeToken(storage = null) {
  if (storage) {
    storage.removeItem(TOKEN_NAME);
  } else {
    localStorage.removeItem(TOKEN_NAME);
    sessionStorage.removeItem(TOKEN_NAME);
  }
}

export function tokenNotExpired() {
  return !helper.isTokenExpired(getToken());
}

export function decodeToken(): DecodedToken {
  return helper.decodeToken(getToken());
}

@Injectable()
export class JwtHttpInterceptor implements HttpInterceptor {
  constructor() {}
  intercept(
    request: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    const token = getToken();
    let clone: HttpRequest<any>;
    if (token) {
      clone = request.clone({
        setHeaders: {
          Accept: `application/json`,
          'Content-Type': `application/json`,
          Authorization: `Bearer ${token}`
        }
      });
    } else {
      clone = request.clone({
        setHeaders: {
          Accept: `application/json`,
          'Content-Type': `application/json`
        }
      });
    }
    return next.handle(clone);
  }
}

On my dashboard, I do a very simple request:

this.userService.getProfile().subscribe(data => (this.profile = data));

Now, my problem is the following:

Using Postman, if I do a POST request to /login , I get a token back. Everything fine so far. And if I use this token (in Postman) in my next GET request to /getuser , I also get the results I want (email, firstName, lastName, accountType of the user).

However, the problem is on the front-end. I login and arrive to the main page (no issues there), but once getProfile() is called, I get a GET http://localhost:3001/getuser 401 (Unauthorized) . I've been stuck on this for hours and not sure where the problem is from.

I appreciate any help I can get.

Thanks!

Answer 1

I found my issue. I had forgotten to add the Interceptor I had created to my providers in app.module.ts .

  // Auth
  {
    provide: HTTP_INTERCEPTORS,
    useClass: JwtHttpInterceptor,
    multi: true
  }