CODEWITHSUNDEEP
angularjsinterceptorpostman
Photonic
Photonic

Reputation: 1421

x-access-token not intercepting in angular.js

When i use chrome extension called POSTMAN to call an api

api.get('/me', function(req, res) {
    res.json(req.decoded);
});

return api;

Using x-access-token as a header with a valid token value, i get a valid respond.

When using interceptor i copied from online tutorial i get this error message:

http://localhost:3000/api/me 403 (Forbidden)

My API

module.exports = function(app, express) {
api.use(function(req, res, next) {
    var token = req.body.token || req.param('token') || req.headers['x-access-token'];

    if (token) {
        jsonwebtoken.verify(token, secretKey, function(err, decoded) {
            if (err) {
                res.status(403).send({ sucess: false, message: "Failed to authenticate"});
            } else {
                req.decoded = decoded;
                next();
            }
        });
    } else {
        res.status(403).send({ success: false, message: "No Token Provided"});
    }
});

api.get('/me', function(req, res) {
        res.json(req.decoded);
    });

    return api; 
}

My Authentication Service

.factory('Auth', function($http, $q, AuthToken) {

    var authFactory = {};
    authFactory.getUser = function() {
        if(AuthToken.getToken())

         ///Here it breaks here

            return $http.get('/api/me');
        else
            return $q.reject({ message: "User has no fucking token"});
    }
    return authFactory;
})
.factory('AuthToken', function($window) {
var authTokenFactory = {};

authTokenFactory.getToken = function() {
    return $window.localStorage.getItem('token');
}

authTokenFactory.setToken = function(token) {
    if (token)
        $window.localStorage.setItem('token', token);
    else
        $window.localStorage.removeItem('token');
}

return authTokenFactory;

})
.factory('AuthInterceptor', function($q, $location, AuthToken) {
var interceptorFactory = {};

 interceptorFactory.request = function(config) {
    var token = AuthToken.getToken();

    if(token) {
        config.header['x-access-token'] = token;
    }

    return config;
 };

 interceptorFactory.responeError = function(response) {
    if (response.status == 403)
        $location.path('/login');
    return $q.reject(response);
 }
 return interceptorFactory; })



.factory('Auth', function($http, $q, AuthToken) {

var authFactory = {};

authFactory.getUser = function() {
    if(AuthToken.getToken())
        return $http.get('/api/me');
    else
        return $q.reject({ message: "User has no fucking token"});
}
return authFactory; })

Upvotes: 1

Views: 3910

Answers (1)

jackfrankland
jackfrankland

Reputation: 2062

You have to make sure the interceptor is in effect, by adding it to $httpProvider. The following code does this, inside of the config for the app:

.config(function ($httpProvider) {
  $httpProvider.interceptors.push('AuthInterceptor');
});

As a heads up, you have a misspelling:

interceptorFactory.responeError -> interceptorFactory.responseError

Edit:

Also, having interceptors helps when you want the same behaviour for multiple requests without having to alter each request. For this use case, perhaps it is simpler not using an interceptor, but rather adding the header in manually for the one request:

return $http.get('/api/me', { headers: {'x-access-token': AuthToken.getToken()} });

Upvotes: 2

Related Questions