时间戳

首页 > 解决方案 > MEAN (SPA) 简单授权

angular - MEAN (SPA) 简单授权

问题描述

我有一个构建应用程序，但现在我正试图将其用于 SPA 应用程序。我被困在授权上。

我可以注册新用户，让他们登录并检索其令牌。但是当我发送令牌并尝试在我的中间件中验证它时，我不知道出了什么问题。 我认为我在第 3 步中做错了（因为第 1-2 步正在工作），但为了完整起见，我添加了所有步骤以及与这些步骤相关的代码。

有人可以帮我理解我做错了什么吗？

1> 注册一个新帐户（在数据库中存储帐户）

后端：

router.post("/register", function(req, res){
CreateUser(req.body.username, req.body.password, 0, function(err, nwUser){
    if(err){
        console.log('error: ');
        return res.redirect("register"); //TODO: show the error message in 'err'
    }
        passport.authenticate("local")(req, res, function(){
            console.log('success, gonne try to make token:');
            //secret key,TODO: set in variable (or better environment)
            const token = jwt.sign(nwUser.toJSON(), "SECRETCODE");
            const result = res.json({nwUser, token});
            return result;
        });
    });
});

2> 登录帐户（如果成功向客户端发送加密令牌（角度））

后端：

router.post('/login',passport.authenticate('local'), function(req, res) {
    User.findById(req.user._id, function(err, foundUser){
        if(err){
            console.log('Error with logging in!');
            console.log(err);
            return err;
        }
        const token = jwt.sign(foundUser.toJSON(), "SECRETCODE");
        const result = res.json({foundUser, token});
        return result;
    });
});

3> 如果请求现在需要授权，客户端（Angular）还应该随请求发送令牌，后端检查令牌是否有效（在中间件内部）。如果是，则返回数据。

我如何从角度发送数据：

const headers: HttpHeaders = new HttpHeaders();
headers.append('Authorization', 'Bearer ' + this.authService.getToken());

console.log('token before sending in data-storage: ' + this.authService.getToken());
this.httpClient.get<Category[]>(environment.backendServer + '/categories/',
  {observe: 'body', responseType: 'json', headers: headers}).pipe(map(
  (categories) => {
    console.log(categories);
    return categories;
  }
)).subscribe(
  (categories: Category[]) => {
    this.categoryService.setCategories(categories);
  }
);

我在后端使用的中间件：

middlewareObj.authenticateJWT = function(req, res, next) {
// check header or url parameters or post parameters for token
var token = req.body.token || req.query.token || req.headers['x-access-token'];
//token = undefined????

// decode token
if (token) {

    // verifies secret and checks exp
    jwt.verify(token, app.get('SECRETCODE'), function(err, decoded) {
        if (err) {
            return res.json({ success: false, message: 'Failed to authenticate token.' });
        } else {
            // if everything is good, save to request for use in other routes
            req.decoded = decoded;
            next();
        }
    });

} else {

    // if there is no token
    // return an error
    return res.status(403).send({
        success: false,
        message: 'No token provided.'
    });

}
}

到目前为止，我设法完成了第 1-2 步，尽管可能有一些地方可以改进。但我被困在第3步......

我不明白如何将令牌从 Angular 发送到后端。

标签： angulartypescriptexpressmean-stacksingle-page-application

解决方案

您使用的标头似乎与您使用的任何令牌都不匹配。

而不是寻找

req.headers['x-access-token']

做

req.headers['Authorization']

因为那是您附加到标题的内容。或者，如果您从客户端发送，请将 JSON 发送为

{token: this.authService.getToken()}

推荐阅读