Token with angularjs

Question

My current problem, is how to redirect signup route to homepage route with the token. The backend of this route does create the token, but for the frontend I couldn't figure out of how to do it.

.controller('UserCreateController', function(User, $location, $localStorage) {

var vm = this;


// function to create a user
vm.SignUpUser = function() {
    vm.processing = true;

    // clear the message
    vm.message = '';

    // use the create function in the userService
    User.create(vm.userData)
        .success(function(data) {
            vm.processing = false;

            // clear the form
            vm.userData = {};
            vm.message = data.message;

              // What should i do here to get the token?
              $location.path('/')

    });

};

})

service.js

userFactory.create = function(userData) {

        return $http.post('/api/signup', userData);

    }

This is the service, and how do i return it with the token

Updated version: This is my Api in node/express of generating the token after the user has signup

api.js

var createToken = function(user) {

    var token = jwt.sign({
        id: user._id,
        name: user.name,
        username: user.username
    }, superSecret, {
        expiresInMinute: 1440
    });

    return token;

}





    apiRouter.post('/signup', function(req, res) {

            var user = new User({
                name: req.body.name,
                username: req.body.username,
                password: req.body.password
            });

            var token = createToken(user);
            user.save(function(err) {
                if(err) { 
                    res.send(err);
                    return;
                }

                res.json({
                    success: true, 
                    message: 'User has been created!',
                    token: token
                });
            });

I have no clue of how to pass that json data that has been generated by the api to the angular.

Answer 1

First, you need to retrieve the token from response headers, so update your service to:

userFactory.create = function(userData) {
    return $http.post('/api/signup', userData)
        .then(function(data, status, headers, config, status) {
           return data;
        });
}

Then you can read the token from controller

User.create(vm.userData)
    .then(function(data) {
        vm.processing = false;

        vm.userData = {};
        vm.message = data.message;

        // remember to reference $window in your controller
        $window.localStorage.setItem('token', data.token);
        $location.path('/')

});

After users login or signup, next time when you send requests to backend, you can add token to headers manually.

var req = {
 method: 'POST',
 url: 'http://example.com',
 headers: {
   'Authentication': $window.localStorage.getItem('token')
 },
 data: { test: 'test' },
}

$http(req).success(function(){...}).error(function(){...});

Answer 2

The code you posted looks good. If you return this token as part of the JSON result from your server API call, you should be able to access it as a property on the data variable in your success method.

Using the network tab of the developer tools in Chrome (F12), what do you see returned from the server when you call /api/signup? Do you see the token there?