Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

req.headers['x-access-token'] não guarda o token = undefined

Boa noite,

Estou realizando uma aplicação de acordo foi ensinado no curso, porém não estou conseguindo obter o token nas requisição req.headers['x-access-token'] no backend.

O código está um pouco diferente pois estou utilizando o banco mysql, mas, consigo realizar a consulta, montar o token e enviar o mesmo ao angular até mesmo consigo realizar o login com o usuário e seus dados de acordo com o meu banco. Bom até o envio do token ao $window.localStorage.token, está sendo realizando perfeitamente, pois o mesmo guarda no localStorage do navegador. Porém quando é enviado pelo interceptor para o backend chega como undefined.

Alguém pode me ajudar?

segue o codigo das minhas rotas do auth.js

var jwt = require("jsonwebtoken");
module.exports = function (app) {
    app.post('/autentica', function (req, res) {
        var connection = app.persistencia.connectionFactory();
        var authDAO = new app.persistencia.authDAO(connection);
        var usuario = {
            login: req.body.login,
            password: req.body.password
        }
        authDAO.autentica(usuario, function (erro, result) {
            if (result.length == 0) {
                console.log('Login/senha inválidos');
                res.sendStatus(401);
            } else {
                var token = jwt.sign({ login: result.login }, app.get('secret'), {
                    expiresIn: 1800 // expires in 30 min
                });
                console.log('Autenticado: token adicionado na resposta');
                res.set('x-access-token', token);
                res.end();
            }
        });

    });
    app.use('/*', function (req, res, next) {
        var token = req.headers['x-access-token'];
         console.log(token);
        if (token) {
            console.log("verificando token");
            jwt.verify(token, app.get('secret'), function (erro, decoded) {
                if (erro) {  
                    console.log("token rejeitado");
                    res.sendStatus(401);
                }
                req.login = decoded;
                next();
            });
        } else {
            console.log("token não enviado");
            res.sendStatus(401);
        }
    });

}

Segue o codigo do service token-interceptor.js

angular.module('wetraining')
    .factory('tokenInterceptor', function ($q, $window, $location) {

        var interceptor = {};

        interceptor.response = function (response) {
            var token = response.headers('x-access-token');
            if (token) {
                $window.localStorage.token = token;
                console.log('------------------------------------');
                console.log("token armazenado no localStorage");
                console.log('------------------------------------');

            }
            return response;
        }

        interceptor.request = function (config) {
            config.headers = config.headers || {};

            if ($window.localStorage.token) {

                config.headers['x-access-token'] = $window.localStorage.token;
                console.log('------------------------------------');7
                console.log($window.localStorage.token);
                console.log( config.headers['x-access-token']);
                console.log('------------------------------------');
            }

            return config;
        }

        return interceptor;

    });

segue também os dados da minha main.js

angular.module('wetraining', ['ngAnimate', 'ngRoute', 'ngResource'])
    .config(function ($routeProvider, $locationProvider, $httpProvider) {

       $httpProvider.interceptors.push('tokenInterceptor');

        $routeProvider.when('/home', {
            templateUrl: '/pages/home.html',
         //   controller: 'HomeController'
        });

        $routeProvider.when('/login', {
            templateUrl: '../pages/login.html',
            controller: 'LoginController'
        });


        $routeProvider.otherwise({ redirectTo: '/home' });

    });
7 respostas

Sua aplicação Angular e seu backend estão no mesmo servidor ou são duas app separadas?

Flavio,

Sim, está na mesmo servido. Até carreguei um modulo do cros e adicionei o 'x-access-token' como tentativa, porém não tive sucesso

No meu express

var express = require('express');
var consign = require('consign');
var cors = require('cors');
var bodyParser = require('body-parser');
var jwt = require("jsonwebtoken");
const favicon = require('express-favicon');

module.exports = function () {

    var app = express();
    app.set('secret','wetrainingajudaotreinadorisico');
    app.use(favicon(__dirname + 'favicon.png'));
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    app.use(express.static('./public'));
    app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "*");
  res.header('Access-Control-Allow-Credentials', "*");
  res.header('Access-Control-Expose-Headers', 'x-access-token'); //essta linha habilita o token no header
  next();
});
    consign()
        .include('app/routes')
        .then('persistencia')
        .into(app);

    return app;

}

Seu interceptador do Angular é chamado, pelo menos? Aquele que coloca o token no header para ser enviado?

Acredito que sim Flavio, tu diz se o mesmo está sendo incluído na pagina index.html?

Segue..

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="pt-br" ng-app="wetraining">
<!--<![endif]-->

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>We Training</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/efeitos.css">
    <script src="js/lib/angular/angular.min.js"></script>
    <script src="js/lib/angular/angular-animate.min.js"></script>
    <script src="js/lib/angular/angular-route.min.js"></script>
    <script src="js/lib/angular/angular-resource.min.js"></script>
    <script src="js/main.js"></script>
    <script src="js/controllers/LoginController.js"></script>
    <script src="js/controllers/HomeController.js"></script>
    <script src="js/services/token-interceptor.js"></script>
</head>

<body>
    <!--[if lt IE 7]>
                <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
            <![endif]-->
    <ng-view></ng-view>

</body>

</html>

Me corrige se eu estiver equivocado sobre tua pergunta.

Refiro-me ao método do seu interceptador que filtra as requests.

solução!

Flavio,

Consegui verificar o problema, na verdade eu estava "chupando bala" , ao acessar meu localhost:3000, como na minha pagina inicial seu controller não tinha nenhuma requisição para o meu servidor logo o interceptador não verificava ou validava se existia token, e no meu console no backend estava sempre vindo com o token = undefined e no meu console "token não enviado".

Em fim, coloquei uma requisição no meu controller para o servidor e deu certo, o mesmo fez todas as validações conforme apresentado no curso, até eu ver isso, bati muito a cabeça.

obrigado!

Que boa notícia! Além disso fico orgulhoso do meu aluno que descobriu o problema sozinho!

Sucesso e bom estudo Ciro!