在前端返回未定义的角度 http_interceptors

Question

使用 MEAN Stack，我使用 jsonwebtoken 设置了身份验证，并且我能够使用 jsonwebtoken 从后端生成令牌，但它从前端的 auth-interceptor 服务返回未定义。见我下面的sn-ps。谢谢

auth-interceptor.ts 服务

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

import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(private authUser: AuthService){}
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authToken = this.authUser.getToken();
        console.log(authToken); //but this return undefined
        if(authToken) {
            req = req.clone({
                headers: req.headers.set("Authorization", "Bearer " + authToken)
            });
        }
        return next.handle(req);
    }
}

auth-service.ts 服务

import { Injectable } from "@angular/core";
import { HttpClient } from '@angular/common/http';

import { User } from "./user.model";

@Injectable({ providedIn: "root" })
export class AuthService {
    private token: string;

    constructor(private http: HttpClient) {}

    getToken() {
        return this.token;
    }


    login(Email: string, Password: string) {
        const userAuth: User = { Email: Email, Password: Password, 
            Firstname:null, Lastname:null, CourseStudied:null, AcademyAward:null, 
            Photo:null, id:null, AreaSpecialised:null};
        this.http.post<{token: string}>("http://localhost:3000/api/users/login/", userAuth)
            .subscribe(response => {
                const token = response.token;
                this.token = token;
                console.log(this.token) //this returns the token
            });
    }

}

我的 app.modules.ts 的一部分

providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
    MDBSpinningPreloader, UsersService,
  ],

我的中间件 - 我也控制台记录令牌，它可以工作

 const jwt = require("jsonwebtoken");

module.exports = (req, res, next) => {
    try {
        const token = req.headers.authorization.split(" ")[1];
        jwt.verify(token, "sjoigej34989wejsdijfi!8Z()&iuhusdh3wn2sjj5JDU3u5fksl)k2=SDKOFO322KSMFIIMMK1K4K#@^5JDLK9kskd");
        next();
    } catch (error) {
        res.status(401).json({ message: "You are not authorized!"});
    }
}

这是我登录的快捷方式。我也在这里 console.log 记录令牌，它可以工作

router.post("/login", (req, res, next) => {
    let fetchedUser;
    User.findOne({Email: req.body.Email}).then(user => {
        if (!user) {
            return res.status(401).json({
                message: 'Auth failed - Either email or password is incorrect'
            });
        }
        fetchedUser = user;
        return bcrpt.compare(req.body.Password, user.Password);
    })
    .then (result => {
        if(!result) {
            return res.status(401).json({
                message: 'Auth failed - Either email or password is incorrect'
            });
        }
        const token = jwt.sign(
            {Email:fetchedUser.Email, userId: fetchedUser._id, username: fetchedUser.Firstname + ' ' + fetchedUser.Lastname},
            "sjoigej34989wejsdijfi!8Z()&iuhusdh3wn2sjj5JDU3u5fksl)k2=SDKOFO322KSMFIIMMK1K4K#@^5JDLK9kskd",
            { expiresIn: "0.25h"}
        );
        res.status(200).json({
            token: token
        });
    })
    .catch(err => {
        return res.status(401).json({
            message: 'Auth failed - Either email or password is incorrect'
        })
    })

令牌仅在前端没有到达我的 auth-interceptor.ts。拜托，我只是一个新手，帮帮我。

Answer 1

您应该将令牌存储在浏览器会话中，而不是存储在类本身中。

将AuthService 中的login 方法更改为：

login(Email: string, Password: string) {
    const userAuth: User = {
      Email: Email, Password: Password,
      Firstname: null, Lastname: null, CourseStudied: null, AcademyAward: null,
      Photo: null, id: null, AreaSpecialised: null
    };
    this.http.post<{ token: string }>("http://localhost:3000/api/users/login/", userAuth)
      .subscribe(response => {
        const token = response.token;
        localStorage.setItem('token', token);
        console.log(token) //this returns the token
      });
  }

并添加此方法：

getToken(): string {
    return localStorage.getItem('auth_token');
}

并将AuthInterceptor 中的intercept 方法更改为：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        const authToken = this.authenticationService.getToken();
        console.log(authToken); //but this return undefined
        if(authToken) {
            req = req.clone({
                headers: req.headers.set("Authorization", "Bearer " + authToken)
            });
        }
        return next.handle(req);
}