Question

最近我在我的网站上努力工作，前端的angularjs和后端的Symfony 3。我在后端放置了一个安全层，因此我的FE的每个请求都必须有一个有效的令牌（使用grant_type = client_credentials）。我已经阅读了关于通过角度调用我的API后端的最佳实践的looooot ...我通常在我向后端发出的每个请求上发送令牌，但我读到我可以使用$ http拦截器始终发送标题我的不记名标记。

所以，我有点困惑，如何开始...因为一部分：

我想调用我的后端来加载我的页面上用来显示信息的某些数据（使用grant_type = client_credentials），
我也有一个用户管理系统。所以这个用户必须使用用户和密码登录（再次拨打我的后端）但是使用grant_type =密码...

真正重要的问题是：我能用一个拦截器做同样的事情吗？（一个用于显示页面元素数据，其中grant_type = client_credentials，其他用于普通用户？）

另一个问题是......如果尚未创建令牌，我可以使用此拦截器制作令牌（仅针对页面信息，对于想要刷新令牌的用户，如果即将到期）？< / p>

对不起，如果有点困惑...我很困惑，我真的看了很多帖子，文档和帮助...但我不知道从哪里开始...我希望你能帮助我... 谢谢大家。

Answer 1

JWT的美妙之处在于它们本质上只是javascript对象。例如，您可以向用户提供包含其在系统中的角色的令牌（用户，管理员，支持等...）并相应地显示/隐藏元素。因此，基本上您不仅授予用户访问API的权限，还为他们提供访问类型。当然，您永远不应该依赖客户端身份验证来直接允许受限制的API（在每个请求上验证令牌，检查服务器上提供的角色）。

这是NodeJS和Angular中的一个例子：

//In NodeJS...
app.get('/path/to/secured/api', verifyTokenOr401, function(req, res) {
//Do stuff...
res.json({msg: 'Success');
});

function verifyTokenOr401(req, res, next) {
 var authHeader = req.headers.authorization;
 try {
  var token = authHeader.split(' ')[1];
  if(jwt.verify(token, 'myAppSecret'))
   next();
 } catch(e) {
  res.status(401).send('Not authorized');
 }
}

//Assuming you use node-jsonwebtoken package
app.post('/path/to/authentication', function (req, res) {
//Verify authentication...

 User.findOne({username: req.body.username}).then(function(user) {
 //VerifyPassword
  if(!user)
   return res.status(401).send('No such user ' + req.body.username);

  if(!user.verifyPassword(req.body.password))
   return res.status(401).send('Wrong password for user ' + user.username);

 //Provide the user with the access token
  var token = jwt.sign({ subject: user.id, role: user.role }, 'myAppSecret');
  res.setHeader('Authorization', 'Bearer ' + token.toString());
  res.json(user);
 })
.catch(function (e) { res.status(500).json(e); });
});

//In angular...
.factory('jwtInterceptor', function() {
 return {
  request: function(config){
   var authHeader = config.headers('authorization');
   //Attach header if not present
   if(!authHeader)
    config.headers.authorization = 'Bearer ' + localStorage.get('myAppToken');
   return config;
  },
  response: function(response){
   //Look for token in the header if you get a response and save it
   var authHeader = response.headers('authorization');
   if(authHeader){
    try { localStorage.myAppToken = authHeader.split(' ')[1]; } catch(e) {}
   }
   return response;
  }
 }
});

值得一提的是：查看auth0对NodeJS和Angular的回购。两者都很棒。

Answer 2

您可以创建一个服务，当通过angular加载时，可以获取授权令牌的get调用并在标头中设置。通过这个，您不需要在每次Ajax调用时设置令牌。你可以这样做：

app.service("MyService", ["$http", function($http) {
    initialize();

    function initialize() {
        getAuthorizationToken().then(function(response) {
            $http.defaults.headers.common.Authorization = 'Bearer some_auth_code_here';
        });
    }

    function getAuthorizationToken() {
        // Get call for token
    }
}]);

自定义AngularJS $ http拦截器案例

2 个答案: