0 1.2K

Интеграция refresh token в angularjs приложение

Категории: Программирование

Продолжаем статью где описано как интегрировать 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.

Комментарии:

Пожалуйста авторизируйтесь, чтобы получить возможность оставлять комментарии