Angular 4 jwt 身份验证答案

【问题标题】：Angular 4 jwt authenticationAngular 4 jwt 身份验证
【发布时间】：2018-05-07 19:07:12
【问题描述】：

使用来自 Angular 应用程序的护照 jwt 进行身份验证我将 Angular 4 中的请求标头设置为我在服务器端使用护照 jwt，但出现未经授权的错误

`let strategy = new JwtStrategy(jwtOpts, (jwt_payload, cb)=>{
    let stmt = "select * from user where id = ?";
    let id = jwt_payload.id;
    connection.query(stmt, id, (error, result) => {
        if(error){
            throw error;
        }
        if(result){
            var userinfo = {
                email: result[0].email,
                id: result[0].id
            }
            cb(null, userinfo);
        }
        else{
            cb(null, false);
        }
    })
})`

//this is my route
`app.use('/tournament',passport.authenticate('jwt', {session: false}), tour_route);` 


//This is my angular call
 createTournament(name: string){
        this.token = 'JWT ' + this.authService.getToken();
        const body = {
            name
        }
        this.http.post('http://localhost:8000/tournament',
            {
                headers: new HttpHeaders().set('Authorization', this.token)
            })
            .subscribe(
                response => {}
                );
    }

But i am getting an unauthorised access even if i am sending the right token

【问题讨论】：

您必须添加代码的相关部分，否则没有人可以帮助您
我猜出于某种原因您的令牌没有被输入“授权”。当您从 authService 获取令牌时，我也不明白为什么您的客户端将“JWT”添加到您的令牌中？当您从 localStorage 获取令牌时，根本不应更改从后端发送到本地存储的令牌。您能否发布您的后端代码，例如 app.post() 或 app.put() 等。
在发出请求之前，您是否检查过您是否从 this.authService.getToken() 获取令牌？如果您可以添加您编写的代码来验证您的令牌，那将会很有帮助。

标签： angular express nodes passport.js

【解决方案1】：

尝试将 Bearer 或 Token 或 Basic 与 Token 一起添加，这应该可以解决问题。

headers: new HttpHeaders().set('Authorization', 'Bearer'+this.token)

【讨论】：

将这些添加到 django 设置 REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', ), }

【解决方案2】：

如果是后端，您必须以 post 方法的形式传递“用户名”和“密码”字段。因为 PassportJS 包只需要用户名和密码作为请求数据。

然后使用 passport-jwt 包，您可以生成令牌并将该令牌传递到登录 API 的请求数据中。从前端之后，无论何时您都会对后端进行任何调用。那么您需要使用标头详细信息传递该令牌。您可以访问令牌用户 req.headers 选项并验证令牌 jwt.verify。如果它会验证然后调用 next() 函数。这样它就会调用下一个中间件。否则，它将向前端发送错误消息

【讨论】：