首页 > 解决方案 > NodeJS 中的本地身份验证将 JWT 令牌快速传递回单独的 Angular SPA 客户端

问题描述

我正在使用 NodeJS 12 Express 4 中的后端和 Angular 8 中的前端客户端 SPA 构建应用程序。我正在使用 PassportJS 本地身份验证策略构建本地身份验证。

身份验证工作流程:

将 GET 请求发送到 /login 端点并加载登录页面。

注意:登录页面不在 SPA 中,它是一个简单的 pug 页面,其表单将 POST 发送到 /login 端点。

获取/登录

router.get('/', (req, res, next) => {
  return res.render('login');
});

用户输入他们的凭据,提交表单并向 /login 发送 POST 请求。Passport 本地策略检查凭据,然后在回调中创建要发送回客户端的 JWT。

这就是我卡住的地方。如果我在 SPA 中有登录页面,我可以发送一个 AJAX 请求并将响应以 JSON 形式返回给客户端,例如return res.json(jwtToken),SPA 可以解析令牌并将其直接存储在会话存储中。

但是,由于登录页面直接在服务器上,如何将令牌发送回客户端?

目前,我正在尝试将令牌放在 auth 标头中并“重定向”到客户端 URL。这是有效的(我可以在浏览器控制台中看到身份验证令牌)但是 SPA 如何在 Angular 端读取令牌?Angular 需要访问 HTTP 标头,获取令牌并将其保存在会话存储中。

发布/登录

router.post('/', (req, res, next) => {

  // Passport authentication strategy
  passport.authenticate('local', function (err, user, info) {
    // Callback after authentication strategy is complete

    // Check error
    if (err) {
      console.error(err);
      return res.status(404).json(err);
    }

    // Check if user was returned
    if (user) {

      // Generate JWT token
      let jwt;
      jwtToken = generateJwt();


      // Set authorization header
      res.set({
        'Content-Type': 'application/json',
        'Authorization': `Bearer: ${jwtToken}`,
      });

      // Redirect to the client
      return res.redirect('http://localhost:4200/login');

      //return res.json(jwtToken);

    }
  })(req, res);
});

问题:

在 Angular 组件中,是否可以解析 Authorization 标头以获取服务器发送的令牌?我尝试使用该activatedRoute模块,但无法从初始页面加载中访问标题数据。我还尝试将令牌作为 URL 参数添加到 GET 请求中,但这会使 URL 变得非常长并以纯文本形式公开令牌。是否有任何合理的方法将令牌从服务器安全地发送到客户端?

更新:

我将尝试使用 express cookieParser 在 cookie 中发送令牌,类似于另一篇文章中的这个答案。这样,SPA 可以访问保存在 cookie 中的令牌,对其进行解析,然后将其保存在会话存储中。但是,我对此犹豫不决,并且不确定这是否是最可持续的技术,因为这需要一个额外的模块来解析 SPA 中的 cookie。

  let options = {
    maxAge: 1000 * 60 * 15,
    httpOnly: false,
    signed: true
  }

  // Set cookie
  res.cookie('jwt-token', jwt, options)

  // Redirect to the client
  return res.redirect(302, 'http://localhost:4200/login');

标签: node.jsangularauthenticationpassport-local

解决方案


推荐阅读