Angularjs jwt refresh token как реализовать?

Question

[Bogopodoben]

Собственно вопрос. Есть аутентификация посредством JWT angularjs.
На данные момент все работает ок, после авторизации с api возвращается токен вида:

eyxxxGciOiJSUzI1NiIsInR5cCI6IkpXUyJ9.eyJleHAiOjE0NDI0MDM3NTgsImVtYWlsIjoid2VibWFzdGVyQGdlc2RpbmV0LmNv........

записывается в куки и работает заголовком во всех запросах к api.
Проблема в том, что когда истекает жизнь токена, необходимо перелогиниваться.
Почитав просторы интернета, узнал, что есть такая тема в jwt как refresh токен, который обновляется или обновляет access token до его окончания времени.
Почитал довольно полезную статью на хабре https://habrahabr.ru/post/267349/ и доку по jwt https://github.com/auth0/auth0-angular/blob/master... , и не смог разобраться в их примере по resfresh токену. Не догнал откуда его изначально взять.

Можно более детально узнать, как обновлять access token через refresh?
Как реализовать запрос на refresh через нужный промежуток времени и т.д.
Было бы идеально на рабочем примере объяснить.

P.S: Частично реализовал схему, но токен обновляется только после того как время выходит, и любой запрос к серверу выдает 401 и разлогинивает так, как я делал проверку на $stateChangeStart, при переходе по страницам все ок. Знаю, что не верно но все же.

Имеется запрос типо api/refresh для обновления токена, только вопрос в том, как правильно реализовать идею обновления токена, до его окончания?

На данный момент, что есть:

var token = AuthUser.getToken();
        var dateToken = $filter('date')(jwtHelper.getTokenExpirationDate(token), 'dd.MM.yyyy HH:mm:ss');
        var dayDate = $filter('date')(new Date(), 'dd.MM.yyyy HH:mm:ss');

        if (dayDate > dateToken) {
          return $http({
            url: API.url + '/api/refresh',
            skipAuthorization: true,
            method: 'GET',
          }).then(function(response) {
            var id_token = response.data.token;
            AuthUser.setToken(id_token);
            return id_token;
          });

Answer 1

[Артем Кустиков]

Токен в куки пишется на севере, поэтому и обновлять его нужно там же, тут пример: stackoverflow.com/questions/26580213/implementing-...

Никакой дополнительной магии (refresh) на клиенте не нужно

Comments

[Bogopodoben]

Токен перенс в храние local storage, и реализовал на клиенте след способом:
jwtInterceptorProvider.tokenGetter = ['jwtHelper', '$http', 'AuthUser', 'API', '$state',
function(jwtHelper, $http, AuthUser, API, $state) {
var token = AuthUser.getToken();
if(token){
if (jwtHelper.isTokenExpired(token)) {
return $http({
url: API.url + 'login/refresh',
skipAuthorization: true,
method: 'GET',
headers : { Authorization : 'Bearer '+ token},
}).then(function(res) {
AuthUser.setToken(res.data.token);
return res.data.token;
});
} else {
return token;
};
};
}];
jwtInterceptorProvider.forceHeadersUpdate = true;
$httpProvider.interceptors.push('jwtInterceptor');

Но запрос на refresh уходит от каждого запроса за данными на сервер, допустим на странице ссылается два запроса и уходит два запроса на рефреш токена, и соответственно второй запрос выдает 500 ошибку. Не подскажите, как быть с этой проблемой?

[Артем Кустиков]

да не нужен никакой ручной рефреш - это дыра в безопасности, "skipAuthorization: true," - сразу по рукам
Вот рабочий код по рефрешу токена на сервере (по ссылке выше):

function(req, res, next) {
var newToken,
token = jwtLib.fetch(req.headers);

if(token) {
jwt.verify(token, config.jwt.secret, {
secret: config.jwt.secret
}, function(err, decoded) {
if(err) {
return res.status(401).send({
message: 'User token is not valid'
});
}
//Refresh: If the token needs to be refreshed gets the new refreshed token
newToken = jwtLib.refreshToken(decoded);
if(newToken) {
// Set the JWT refreshed token in http header
res.set('Authorization', 'Bearer ' + newToken);
next();
} else {
res.set('Authorization', 'Bearer ' + token);
next();
}
});
} else {
return res.status(401).send({
message: 'User token is not present'
});
}
};

на клиенте достаточно только перекладывать его в/из localStorage/sessionStorage:

angular.module('auth').config(['$httpProvider',
function($httpProvider) {
$httpProvider.interceptors.push(['$q', '$location', 'localStorageService', 'jwtHelper', '$injector',
function($q, $location, localStorageService, jwtHelper, $injector) {
return {
request: function(config) {
var token = localStorageService.get('authToken');
if(token) {
config.headers = config.headers || {};
config.headers.Authorization = 'Bearer ' + token;
}
return config;
},
response: function(response) {
var storedToken = localStorageService.get('authToken'),
receivedToken = response.headers('Authorization');
if(receivedToken && storedToken !== receivedToken) {
localStorageService.set('authToken', receivedToken);
}
return response;
}
};
}
]);
}
]);