我正在处理一个在平均堆栈上运行的Web应用程序(遵循TraversyMedia教程)。然而,我遇到了一个问题,这里提供的任何解决方案似乎都不适合我。每当我尝试访问我的/个人资料页面(除非您获得授权,否则该页面将受到保护)时,我都会收到返回的错误。但是,我已登录并拥有正确的访问令牌。
我已经看了护照jwt git。但是我所拥有的似乎是匹配的。我尝试过使用:ExtractJwt.fromAuthHeaderBack计划(“承载”);
ExtractJwt.fromAuthHeaderBack计划(“承载”);
ExtractJwt.fromAuthHeaderAsBearerToken();
目前正在使用:ExtractJwt。fromAuthHeaderWithScheme(“承载人”),因为没有显示出差异。
我已经查看了HttpClientModule,但我的呼叫似乎没有问题。
passport.js
module.exports = function(passport) {
let opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderWithScheme("bearer");
opts.secretOrKey = config.secret;
passport.use(
new JwtStrategy(opts, (jwt_payload, done) => {
User.getUserById(jwt_payload.data._id, (err, user) => {
if (err) {
return done(err, false);
}
if (user) {
return done(null, user);
} else {
return done(null, false);
}
});
})
);
};
用户。js
const express = require("express");
const router = express.Router();
const passport = require("passport");
const jwt = require("jsonwebtoken");
const config = require("../config/database");
const User = require("../models/user");
...
router.get(
"/profile",
passport.authenticate("jwt", { session: false }),
(req, res, next) => {
res.json({ user: req.user });
}
);
module.exports = router;
auth。服务ts
import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { map } from "rxjs/operators";
// Left some unrelated stuff out here
export class AuthService {
authToken: any;
user: any;
constructor(private http: HttpClient) {}
...
getProfile() {
let headers = new HttpHeaders();
this.loadToken();
headers.append("authorization", this.authToken);
headers.append("Content-Type", "application/json");
return this.http
.get("http://localhost:3000/users/profile", {
headers: headers
})
.pipe(map(res => res));
}
...
loadToken() {
const token = localStorage.getItem("id_token");
this.authToken = token;
}
轮廓组成部分ts
export class ProfileComponent implements OnInit {
user: Object;
constructor(private authService: AuthService, private router: Router) {}
ngOnInit() {
this.authService.getProfile().subscribe(
profile => {
this.user = profile.user;
},
err => {
console.log(err);
return false;
}
);
}
}
预计将被定向到配置文件页面,但我得到的是:
GEThttp://localhost:3000/users/profile401(未授权)
HttpErrorResponse {headers: HttpHeaders, status: 401, statusText: "Unauthorized", url: "http://localhost:3000/users/profile", ok: false, …}
error: "Unauthorized"
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for http://localhost:3000/users/profile: 401 Unauthorized"
name: "HttpErrorResponse"
ok: false
status: 401
statusText: "Unauthorized"
url: "http://localhost:3000/users/profile"
这个问题已经解决了。对于其他有相同问题的人,我解决的是:替换:
let headers=new-HttpHeaders();这loadToken();标题。追加(“授权”,this.authToken);标题。追加(“内容类型”、“应用程序/json”)代码>
与:
const Headers=new HttpHeaders({内容类型:应用程序/json,授权:this.auth令牌});this.load令牌();