如何使用ngResource從Express到Angular獲取JWT令牌？

Question

我正在使用jwt令牌來驗證用戶注冊。 唯一的url發送到用戶的電子郵件，並重定向到身份驗證頁面，令牌在服務器端解碼，我需要將此json數據發送到客戶端的angular。 如何使用令牌作為查詢參數並使用ngResource檢索它？

server.js

'use strict';

var express = require('express');
var app = express();
var router = express.Router();
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');
var jwt = require('jsonwebtoken');
var moment = require('moment');

var port = process.env.PORT || 5000;

app.use(express.static('./src/client/'));
app.use(express.static('./'));
app.use(express.static('./.tmp'));
app.use('/*', express.static('./src/client/index.html'));

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// sign with default (HMAC SHA256)
var expires = moment().add(12, 'hours').valueOf();
var token = jwt.sign({
    user: 'userdata',
    iat: Math.floor(Date.now() / 1000),
    expireIn: expires
}, 'thisismysecretstring');


// nodemailer sendMail function
app.post('/sendMail', function(req, res) {
  var transporter = nodemailer.createTransport('smtp://b204bf8f6ede15:71b5c1473852e2@mailtrap.io:2525');
  var data = req.body;
  var mailOptions = {
    from: 'noreply@ixfire.com',
    to: data.email,
    subject: 'Email sent by ' + data.displayName,
    html: '<p>Please click on url below to register</p><br><a href="http://localhost:3000/auth/?token='+token+'">CLICK HERE</a>'
  };
  transporter.sendMail(mailOptions, function(error, info) {
    if (error) {
      return console.log(error);
    }
    console.log('Message sent: ' + info.response);
  });
  res.json(token);
});

// decode token from url parameter
app.get('/auth', function(req, res) {
  var token = req.query.token;
      try {
          var decoded = jwt.verify(token, 'thisismysecretstring');
          if (decoded.exp <= Date.now()) {
            res.end('Access token has expired', 400);
          }
          res.json(decoded);
      } catch (err) {
          console.log(err);
          res.json(err);
      }
});

// router.use(function(req, res, next) {
//     var token = req.query.token;
//     try {
//         var decoded = jwt.verify(token, 'thisismysecretstring');
//         res.json(decoded);
//     } catch (err) {
//         console.log(err);
//         res.json(err);
//     }
// });
// app.use('/auth', router);

app.listen(port, function () {
  console.log('Express app listening on port: ' + port);
  console.log(__dirname);
});

token.js

(function() {
    'use strict';
    angular
        .module('xfire.token', ['ngResource'])
        .factory('Token', function($resource) {
            return $resource('auth/:token', {
                token: '@token'
            });
        });
})();

網址格式：

http://localhost:3000/auth/?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoiZ2NmYWJyaSIsImlhdCI6MTQ2ODI0NDI1NCwiZXhwaXJlSW4iOjIxNjAwMDAwfQ.5rs1rlWMTTcap4idG-XOU-UiwbU0YzlnAYjm9Vwz-B0

Answer 1

我通常將其發送到標頭中，大多數情況下，我將其命名為x-auth-header 。

但是，我既不使用也不推薦任何人（除了玩耍）使用ngResource ，因為它是有限制的。

就我個人而言，我使用帶有請求/響應攔截器的restangular 。

響應攔截器獲取並解碼令牌，然后請求攔截器使用"Bearer" + tokenString授權請求。