Node.js 在前端返回未定义的角度http_拦截器

使用meanstack，我使用jsonwebtoken设置了一个身份验证，并且我能够使用jsonwebtoken从后端生成令牌，但是它从前端的auth拦截器服务返回未定义的令牌。请参阅下面我的文章片段。多谢各位

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);
    }
}

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
            });
    }

}

我的中间件-我还可以将令牌记录在console.log中，它可以正常工作

 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!"});
    }
}

这是我登录的快捷路线。i 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。拜托，我只是个新手，帮帮我。

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

将

AuthService

中的

login

方法更改为：

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);
}

登录（电子邮件：字符串，密码：字符串）{
const userAuth:User={
电子邮件：电子邮件，密码：密码，
Firstname:null，Lastname:null，coursestuded:null，AcademyAward:null，
照片：空，id:空，专区：空
};
这是http.post（“http://localhost:3000/api/users/login/“，userAuth）
.订阅（响应=>{
const token=response.token；
setItem（'token'，token）；
console.log（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);
}

intercept（req:HttpRequest，next:HttpHandler）：可观察{
const authToken=this.authenticationService.getToken（）；
console.log（authToken）；//但此返回未定义
如果（authToken）{
req=req.clone({
headers:req.headers.set（“授权”、“承载人”+authToken）
});
}
返回next.handle（req）；
}

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

将

AuthService

中的

login

方法更改为：

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);
}

登录（电子邮件：字符串，密码：字符串）{
const userAuth:User={
电子邮件：电子邮件，密码：密码，
Firstname:null，Lastname:null，coursestuded:null，AcademyAward:null，
照片：空，id:空，专区：空
};
这是http.post（“http://localhost:3000/api/users/login/“，userAuth）
.订阅（响应=>{
const token=response.token；
setItem（'token'，token）；
console.log（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);
}

intercept（req:HttpRequest，next:HttpHandler）：可观察{
const authToken=this.authenticationService.getToken（）；
console.log（authToken）；//但此返回未定义
如果（authToken）{
req=req.clone({
headers:req.headers.set（“授权”、“承载人”+authToken）
});
}
返回next.handle（req）；
}

没问题！为了帮助别人，一定要投票并接受答案：）没问题！为了帮助他人，一定要投票并接受答案：）