Angular 4 JWT身份验证

Question

使用Angular应用程序中的passport jwt进行身份验证 我在Angular 4中设置了请求头，如下： 我在服务器端使用passport 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

- Partha Sarathi Nanda

---

你必须添加你代码中相关的部分，否则没有人能够帮助你。 - ᴄʀᴏᴢᴇᴛ

我猜测你的token没有被传递到“Authorization”中。我也不明白为什么当你从authService获取token时，你的客户端会将“JWT”添加到你的token中？当你从localStorage获取token时，后端发送到localStorage的token不应该被改变。你能否发一下你的后端代码，例如app.post()或app.put()等？ - eyoeldefare

你确认在发起请求前已经通过 this.authService.getToken() 获取到了令牌吗？ 如果您能添加代码来验证您的令牌，那将会很有帮助。 - Niral Munjariya

Answer 1

尝试在Token中添加Bearer或Token或Basic，这应该可以解决问题。

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

- Atley Varghese

---

将以下内容添加到Django设置中：REST_FRAMEWORK = { 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_jwt.authentication.JSONWebTokenAuthentication', ), } - Atley Varghese

Answer 2

在后端方面，您必须以POST方法的形式传递“用户名”和“密码”字段。因为PassportJS包将仅期望请求数据中的用户名和密码。

然后，使用passport-jwt包，您可以生成令牌并将该令牌传递给登录API的请求数据。之后，从前端发出任何对后端的调用时，您需要在Header详细信息中传递该令牌。您可以通过req.headers选项访问该令牌用户，并验证token jwt.verify。如果它经过验证，则调用next()函数。这样它将调用下一个中间件。否则，它将向前端发送错误消息。

- Sarbjit Grewal