Интеграция refresh token в angularjs приложение
Categories:
💻 Programming
Продолжаем статью где описано как интегрировать refresh_token. в прошлой статье мы рассмотрели как интегрировать refresh_token в asp.net webapi приложение. В этой статье мы рассмотрим как использовать refresh_token в frontend части написанной на angular.js
1) Создаем проект фронтенд
2) Создаем AuthInterceptorFactory
где интегрируем получение токена путем отправки рефреш токена к webapi
var AuthInterceptorFactory = function ($q, $location, localStorageService) {
var authInterceptorServiceFactory = {};
var _request = function (cfg) {
cfg.headers = cfg.headers || {};
var authData = localStorageService.get('authorizationData');
if (authData && authData.refreshToken) {
var data = "grant_type=refresh_token&refresh_token=" + authData.refreshToken;
$.ajax({
url: config.baseApiUrl + config.authToken,
dataType: 'json',
async: false,
data: data,
type:"POST",
headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
success: function (response) {
localStorageService.set('authorizationData', { token: response.access_token, userName: authData.userName, refreshToken: response.refresh_token, useRefreshTokens: true });
if (authData) {
cfg.headers.Authorization = 'Bearer ' + authData.token;
}
return config;
}
});
}
return cfg;
}
var _responseError = function (rejection) {
if (rejection.status === 401) {
$location.path('/login');
}
if (rejection.status === 302) {
$location.path('/admin');
}
return $q.reject(rejection);
}
authInterceptorServiceFactory.request = _request;
authInterceptorServiceFactory.responseError = _responseError;
return authInterceptorServiceFactory;
}
AuthInterceptorFactory.$inject = ['$q', '$location', 'localStorageService'];
app.factory('AuthInterceptorFactory', AuthInterceptorFactory);
3) Подключаем AuthInterceptorFactory в angular.module
И настраиваем Cors
полный код angular модуля
var app = angular.module("app", ["ngRoute", 'LocalStorageModule']);
var configFunction = function ($routeProvider, $httpProvider, $locationProvider) {
$httpProvider.interceptors.push("AuthInterceptorFactory");
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common["X-Requested-With"];
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
$routeProvider.
when("/", {
templateUrl: "/views/home.html",
controller: HomeController
}).when("/login", {
templateUrl: "/views/account/login.html",
controller: LoginController
})
.otherwise({
redirectTo: "/"
});
}
configFunction.$inject = ["$routeProvider", "$httpProvider", "$locationProvider"];
app.config(configFunction);
Проект целиком вы можете просмотреть на github.
Comments:
Please log in
to be able add comments.