2015-05-29 2 views
1

У меня есть служба входа в систему, которая обрабатывает начальное создание JWT, и я получаю пользовательские данные просто отлично из полезной нагрузки.JWT Exists Check - Где это делать?

Проблема, с которой я столкнулась, где я могу поместить код для проверки, чтобы убедиться, что JWT существует и действителен при каждой смене страницы? У меня уже есть служба Auth с функцией под названием isAuthed, и я просто хочу проверить, чтобы она не была ложной.

Моя первоначальная идея заключалась в том, чтобы поместить этот код в App.run, но мне не повезло с ним.

if (authSvc.getToken() === undefined || !authSvc.isAuthed(authSvc.getToken())) { 
    $window.location.href = "http://localhost:3000/#/login"; 
else { 
    // Continue to run the rest of the .run function. 
} 

Первая проверка условного вызова вызывает функцию, которая вытаскивает JWT из локального хранилища. Итак, мы хотим убедиться, что это не определено. Следующая проверка - проверить, действительно ли этот токен. Если какое-либо из этих условий выходит из строя, перенаправляйте пользователя обратно на страницу входа.

То, что я пытаюсь сделать, это убедиться, что если кто-то ударит что-то вроде localhost:3000/#/app/dashboard, что они будут отброшены назад на страницу входа в систему.

Должен ли я ее обработки с помощью параметра resolve в маршруте, а не как я действительно есть родитель app, что я мог бы поставить resolve в, а затем он должен проверить для проверки подлинности для всех Чайлдс?

Я видел слишком много разных способов проверки подлинности для JWT, что мне действительно нужен четкий ответ на лучшую практику здесь.

AuthService.js

function AuthService($window) { 
    var self = this; 

    self.parseJwt = function(token) { 
     var base64Url = token.split('.')[1]; 
     var base64 = base64Url.replace('-', '+').replace('_', '/'); 
     return JSON.parse($window.atob(base64)); 
    } 

    self.saveToken = function(token) { 
     $window.localStorage['jwtToken'] = token; 
    } 

    self.getToken = function() { 
     return $window.localStorage['jwtToken']; 
    } 

    self.isAuthed = function() { 
     var token = self.getToken(); 
     if(token) { 
      var params = self.parseJwt(token); 
      return Math.round(new Date().getTime()/1000) <= params.exp; 
     } else { 
      return false; 
     } 
    } 

    self.logout = function() { 
     $window.localStorage.removeItem('jwtToken'); 
    } 
} 

App.service('authSvc', AuthService); 

config.js (Routes часть)

// 
// App Routes 
// ----------------------------------- 
$stateProvider 

    .state('login', { 
     url: '/login', 
     templateUrl: basepath('login.html') 
    }) 

    .state('register', { 
     url: '/register', 
     templateUrl: basepath('register.html') 
    }) 

    .state('recover', { 
     url: '/recover-password', 
     templateUrl: basepath('recover.html') 
    }) 

    .state('app', { 
     url: '/app', 
     abstract: true, 
     templateUrl: basepath('app.html'), 
     controller: 'AppController' 
    }) 

    .state('app.users', { 
     url: '/users', 
     templateUrl: basepath('users.html'), 
     controller: 'UserController', 
     title: 'Users' 
    }) 

    .state('app.projects', { 
     url: '/projects', 
     templateUrl: basepath('projects.html'), 
     controller: 'ProjectController', 
     title: 'Projects' 
    }) 

    .state('app.dashboard', { 
     url: '/dashboard', 
     templateUrl: basepath('dashboard.html'), 
     title: 'Dashboard' 
    }); 

AuthIntercepterFactory.js

function AuthInterceptorFactory(API, authSvc) { 
    return { 
     // automatically attach Authorization header 
     request: function(config) { 
      var token = authSvc.getToken(); 
      if(config.url.indexOf(API) === 0 && token) { 
       config.headers.Authorization = 'Bearer ' + token; 
      } 

      return config; 
     }, 

     // If a token was sent back, save it 
     response: function(res) { 
      if(res.config.url.indexOf(API) === 0 && res.data.token) { 
       authSvc.saveToken(res.data.token); 
      } 

      return res; 
     }, 

     responseError: function(res) { 
      if(res.status === 401 || res.status == 403) { 
       $window.location.href = "http://localhost:3000/#/login"; 
      } 
     } 
    } 
} 

App.service('authInterceptor', AuthInterceptorFactory); 

Пожалуйста, дайте мне знать, если вам нужен любой дополнительный код от другого файлы.

Спасибо.

ответ

1

вы должны построить перехватчик и проверить его там, на том же месте, вы должны проверить 401 и 402 ошибок

более

о перехватчиков здесь:

https://code.angularjs.org/1.3.3/docs/api/ng/service/$http

они будут в основном «перехватывать» ваш трафик HTTP, обеспечивающий успех и функции ошибок, который позволяет вам проверять и преобразовывать вызовы, которые необходимо выполнить (запросить перехватчики), и проверять ответы (ответные перехватчики)

+0

Эй, Даян. Я добавил файл AuthInterceptorFactory.js в начальный пост внизу. Не могли бы вы сказать, где бы вы его добавили? Не пытаясь быть неблагодарным для совета, я просто ищу немного больше направлений, где его можно разместить на самом деле. Вы говорите о проверке его перед каждым запросом, сделанным в перехватчике? – user2077115

+0

Эта строка в документах должна проливать некоторый свет на ваш вопрос. '$ httpProvider.interceptors.push ('myHttpInterceptor');' , если не позвольте мне дать вам ключ, где доступны поставщики? вы получили его во время.config() вашего приложения –

+0

Я работаю над проектом Angular 1.x и ценю, что вы цепляетесь за нас в Interceptor. Я смог успешно сгенерировать токен и отправить заголовок ответа на мои первые запросы на регистрацию/регистрацию/панель, но последующие вызовы API вызывают у меня 401 головную боль. Попробуем и воспользуемся перехватчиком, чтобы сначала проверить токен и посмотреть, смогу ли я найти разрешение. Много поисковых запросов, и никто не обсуждал это; очень признателен! – natureminded

Смежные вопросы