маршрутизации соответствующую страницу в AngularJS если LocalStorage маркер существует

Question

Вот HTML:

<form method="post"> 
    <div class="form-group"> 
    <input type="text" ng-model="log.username" placeholder="username"> 
    </div> 
    <div class="form-group"> 
    <input type="password" ng-model="log.pwd" placeholder="password"> 
    </div> 
    <div class="form-group"> 
    <button ng-click="log.login()" class="loginSubmit">Login</button> 
    </div> 
</form> 

Вот абонентское:

function userService($http, API) { 

    $http.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;'; 
    $http.defaults.transformRequest = [function(data) { 
     return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; 
    }]; 

    var self = this; 

    self.login = function(username, pwd, ctrl) { 
    ctrl.requestdata = API + '/winauth' + '; with ' + username; 
    return $http.post(API + '/winauth', { 
     username: username, 
     pwd: pwd 
     })  
    }; 
} 

EDIT - Вот контроллер:

function LoginCtrl(user, $state) { 
    var self = this; 

    function handleRequest(res) { 
    self.responsedata = res; 
    self.message = res.data.message; 

    var authToken = res.data.auth_token; 

    // ** ADDED THIS SECTION ** 
    if(authToken){ 
     localStorage.setItem('token', authToken); 
    } 

    } 

    self.login = function() { 
    this.requestdata = 'Starting request...'; 
    user.login(self.username, self.pwd, self) 
     .then(handleRequest, handleRequest) 

    var token = localStorage.getItem('token'); 

    // ** CHANGED THIS SECTION ** 
    if(!token){ 
     $state.go('login'); 
     console.log('token undefined'); 
    } 
    else if(token){ 
     console.log('token defined'); 
     $state.go('dashboard'); 
    } 
    } 
} 

Что я хочу сделать, это если «токен» o n их локальное хранилище не существует (null) или имеет значение «undefined» Мне нужно, чтобы он вернулся на страницу входа. Если «токен» существует и определен со значением, перейдите на панель управления.

Что происходит сейчас в том, что, когда вы не вводите имя пользователя или пароль и нажмите кнопку для входа в него входит в систему консоли «маркер неопределенными», и сообщение возвращается из API «403 Forbidden» и капель ключевой «токен» со значением «undefined» на локальном хранилище. Все идет нормально. Когда вы снова нажмете кнопку входа в систему со всеми полями, они отправят меня на страницу панели мониторинга и войдут в консоль «Определенный токен», но все вызовы API на ошибках показывают, что «403» показывают, что у меня нет действительный токен ... Не очень хорошо.

Теперь, когда я очищаю все, что из, начать с чистого листа и ввести правильные учетные данные в форму и нажмите кнопку для входа в него входит в систему консоли «маркер неопределенными» не направляет меня на приборной панели все же это ставит ключевой «токен» со значением «24hgkkd875hhs887g» и он просто остается на странице входа. Теперь, когда я нажимаю кнопку во второй раз, когда он регистрируется в консоли, «токен определен» и отправляет меня на приборную панель, как и предполагалось, и все JSON загружается должным образом.

Кажется, что это работает, но нет. Это происходит потому, что функция «handleRequest» устанавливает маркер в своем локальном хранилище и функция «входа» внутри контроллера работает в ближайшее время, чтобы захватить результат «localStorage.setItem (« токен », authToken)»;

EDIT:
По @noKid предложения я добавил проверку, чтобы увидеть, если значение возвращается из API не определенно, и если да, то не будет ставить ключ в локальном хранилище. Поэтому теперь я просто использую [if (! Токен) {} else if (токен) {} (см. Мои правки выше).

Когда они вносят неправильные учетные данные, в локальное хранилище не добавляется токен. Теперь, когда вы ввели правильные учетные данные и щелкнете логин, он добавляет токен в локальное хранилище, но не переходит на панель мониторинга, где он просто остается. но когда вы нажмете кнопку входа во второй раз, вы попадете на панель управления. Это потому, что инструкции IF заканчиваются до того, как .then (handleRequest, handleRequest) закончен или мне нужно поместить инструкции IF в другое место?

Answer 1

Если я не ошибаюсь здесь, это происходит из-за того, что localStorage хранит только ключи/значения в виде строк. (Значение undefined сохраняется как строка 'undefined').

Чтобы быть уверенным, с быстрым JSfiddle demo, мы можем видеть, что результат

localStorage.getItem('token') 

не undefined как ценность, но 'undefined' как String.

Я думаю, ваш лучший выбор здесь, чтобы предотвратить маркер от того установлен, если authToken не определен, или проверить, если маркер значение не «не определено»:

var authToken = res.data.auth_token; 

// Local storage will be updated only if authToken is not null or undefined 
if(authToken) 
    localStorage.setItem('token', authToken); 

или

var token = localStorage.getItem('token'); 

// It should work, but I think it's far less comprehensive 
if(typeof token === 'undefined' || token === null || token === 'undefined'){ 

Редактировать:

Ваша новая проблема, похоже, происходит из-за обещаний.

user.login(self.username, self.pwd, self) 
    .then(handleRequest, handleRequest) 

будет вызывать метод handleRequest() когда $http.post было сделано.

В это же время будет выполняться оставшийся код функции.

var token = localStorage.getItem('token'); Таким образом, var token = localStorage.getItem('token'); будет выполнен перед вызовом handleRequest(), вы будете перенаправлены на страницу входа, BUT handleRequest() все равно будет выполняться после этого, таким образом отправив вас на панель мониторинга во втором логине.

Я рекомендую вам изменить это так:

user.login(self.username, self.pwd, self) 
    .then(function(res){ 
     // We first store the token in the localStorage 
     handleRequest(res); 

     // Then we can safely use it. 
     var token = localStorage.getItem('token'); 

     // ** CHANGED THIS SECTION ** 
     if(!token){ 
      $state.go('login'); 
      console.log('token undefined'); 
     } 
     else if(token){ 
      console.log('token defined'); 
      $state.go('dashboard'); 
     } 
    }, function(){ 
     console.log('This method will be called if the $http post fails'); 
    }) 

Кроме того, я настоятельно советую вам узнать Promises на это поможет вам для асинхронной вещи.