0

I'm unable to login with front-end might be problem with Angular-ui-Router. When I click on login button first I got an error as 'Possibly unhandled rejection' then I injected '$qProvider' in config file after adding $qProvider I don't see any error in console but the page is not changing it state whereas in the network tab i can see the Token is sent from the server. Can some one please help me.

App.config.js

angular.module('myApp', ['ui.router', 'myAppModel'])
        .config(function($qProvider, $stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise('/');
            $qProvider.errorOnUnhandledRejections(false);
            $stateProvider
                .state('base', {
                    abstract: true,
                    views: {
                        'nav@': {
                            template: '<navigation1></navigation1>'
                        }
                    }
                })
                .state('base.login', {
                    parent: 'base',
                    url: '/',
                    views: {
                        'main@': {
                            template: '<login></login>'
                        }
                    }
                })
                .state('base.register', {
                    parent: 'base',
                    url: '/register',
                    views: {
                        'main@': {
                            template: '<register></register>'
                        }
                    }
                })
                .state('base.dashboard', {
                    parent: 'base',
                    url: '/dashboard',
                    views: {
                        'main@': {
                            template: '<dashboard></dashboard>'
                        }
                    }
                })
        });

login.js

angular.module('myAppModel')
        .component('login', {
            templateUrl: '/components/login/login.html',
            controller: function loginCtrl(Authentication, $state) {
                var ctrl = this;

                ctrl.pageHeader = 'Login';

                ctrl.credentials = {
                    email: '',
                    password: '' 
                };

                ctrl.onSubmit = function () {
                    ctrl.formError = '';
                    if(!ctrl.credentials.email || !ctrl.credentials.password) {
                        ctrl.formError = 'All fields required, please try again';
                        return false;
                    }else {
                        ctrl.doLogin();
                    }
                };

                ctrl.doLogin = function () {
                    ctrl.formError = '';
                    Authentication.login(ctrl.credentials).then(function(status) {
                        console.log(status);
                        $state.go('base.dashboard');
                    });
                };

            }
        });

Authentication-service.js

angular.module('myAppModel')
        .service('Authentication', function ($window, $http) { //Register new service with application and inject $window service
            var saveToken = function (token) {  //create a saveToken method to save a value to localStorage
                $window.localStorage['app-token'] = token;
            };

            var getToken = function () {    //Create a getToken method to read a value from localStorage
                return $window.localStorage['app-token'];
            }

            var register = function (user) {
                return $http.post('/api/users/register', user).then(function(data){
                    saveToken(data.token);
                });
            };

            var login = function (user) {
                return $http.post('/api/users/login', user).then(function (data) {
                    saveToken(data.token);
                });
            };

            var logout = function () {
                $window.localStorage.removeItem('app-token');
            };

            var isLoggedIn = function () {
                var token = getToken(); //Get token from storage

                if(token) { //If token exists get payload decode it, and parse it to JSON
                    var payload = JSON.parse($window.atob(token.split('.')[1]));
                    return payload.exp > Date.now() / 1000; //validate whether expiry date has passed
                }else {
                    return false;
                }
            };

            //Getting User Information from the JWT
            var currentUser = function () {
                if (isLoggedIn()) {
                    var token = getToken();
                    var payload = JSON.parse($window.atob(token.split('.')[1]));
                    return {
                        email: payload.email,
                        name: payload.name
                    };
                }
            };

            return {
                saveToken: saveToken,   //Expose methods to application
                getToken: getToken,
                register: register,
                login: login,
                logout: logout,
                isLoggedIn: isLoggedIn,
                currentUser: currentUser
            };

        });
5
  • use the .catch handler of Rejected state of promise Commented Apr 8, 2017 at 5:23
  • hey I see this error now 'Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded' can you please help me? Commented Apr 8, 2017 at 5:26
  • the error is clear, please check the encoding and decoding process and the Salt Factor Commented Apr 8, 2017 at 5:37
  • I saw it from sitepoint article this is the link i referred. link I have done the same. Commented Apr 8, 2017 at 5:47
  • Read through all answers, this might be helpful stackoverflow.com/questions/22578530/… Commented Apr 8, 2017 at 6:18

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.