Как проверять авторизацию при старте в Angular?

Question

[Дмитрий]

Добрый день.
Подскажите, как правильно реализовать проверку аутентификации пользователя при старте приложения? Использую на бекенде jwt для создания токена. При логине получаю токен и храню его и данные о юзере в session storage, но при закрытии-открытии браузера нужно проверять подлинность токена на бекенде. Хочу это делать в блоке run но как это сделать что бы не дать возможность работать с приложением до проверка аутентификации? Вдруг юзер стартонет не с первой страницы, а с "закрытой". Нужно что-то типа resolve в state

Answer 1

[Даша Циклаури]

примерно так в методе ран модуля

function run($rootScope, auth) {
// ...
        var noAuth = ['page.login','page.404'];
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
            var isAuth = auth.isAuth();
            if (toState.name === 'page.login' && isAuth) {
                event.preventDefault();
                $rootScope.$state.go('app.home');
            }
            else if (!(toState.name in noAuth)  && !isAuth) {
                event.preventDefault();
                $rootScope.$state.go('page.login');
            }
        });
    };

храню jwt в локальном хранилище, у него есть expired, то есть можно проверять в геттере, если пользователь подменил вручную, то сервер отдаст 401

function sessionservice($localStorage) {
        var service = {
            setAccessToken: setAccessToken,
            clearAccessToken: clearAccessToken,
            getAccessToken: getAccessToken,
            getTokenInfo: getAccessTokenOpenInfo
        };

        return service;

        function setAccessToken(tokenData) {
            $localStorage.auth = tokenData;
            if ($localStorage.auth.expires_in)
                $localStorage.auth.expires_in = $localStorage.auth.expires_in * 10e3 + Date.now();
        }
        function clearAccessToken() {
            delete $localStorage.auth;
        }
        function getAccessToken() {
            if (!$localStorage.auth || !$localStorage.auth.expires_in || $localStorage.auth.expires_in < Date.now()) {
                clearAccessToken();
                return undefined;
            }
            else
                return $localStorage.auth.access_token;
        }
        function getAccessTokenOpenInfo() {
            var token = getAccessToken();
            return !token ? undefined : JSON.parse(atob(token.split('.')[1]));
        }
    }

function authinterceptor($q, $rootScope, session) {
        var request = function (config) {
            config.headers = config.headers || {};
            var token = session.getAccessToken();
            if (token) {
                config.headers.Authorization = 'Bearer ' + token;
            }
            return config || $q.when(config);
        };
        var responseError = function (rejection) {
            if (rejection.status === 401) {
                session.clearAccessToken();
                $rootScope.$state.go('page.login');
            }
            return $q.reject(rejection);
        };
        return {
            request: request,
            responseError: responseError
        };
    }

Comments

[Дмитрий]

немного не понял как это защитит от установки любого токена? Мы должны токен отправить на бэк, что бы проверить его корректность. Но я не могу понять как остановить выполнение приложения пока не зарезолвится промис с бэка. Вот как resolve в контроллере, пока не зарезолвится значение - стейт не грузится.

[Даша Циклаури]

Дмитрий:
1) ты встраиваешь интерцептор в $http
2) при любом запросе, в котором фигурирует неверный токен сервер вернет 401, т.о. перекинет на стейт аутентификации
3) при успешной аутентификации ты сохраняешь токен и время когда он истекает, т.о. в геттере токена ты каждый раз проверяешь это время

[Дмитрий]

Даша Циклаури: окей, но вопрос не в том, что бы проверить токен, а в том, что бы правильно его хранить. Смотри, человек зашел впервые на сайт по адресу стейта, который требует авторизации. Если мы будем просто проверять что строка токена существует - это не показатель что он корректный. Значит всегда при старте приложения нужно проверять на беке корректность токена. Но так как эта операция асинхронна - приложение сразу загрузится и не будет ждать ответа. Вопрос именно в том, как долждаться ответа

[Даша Циклаури]

Дмитрий: я объясняю ещё раз: некорректность может быть вызвана истечением (для этого ты проверяешь локально в браузере) или всем остальным (содержанием, в том числе подменой времени истечения), его нет смысла проверять при старте приложения, т.к. если подменили перед стартом, то с таким же успехом подменят и после, поэтому заморачиваться не стоит (важно чтобы сервер корректно выдавал 401)
при правильной работе приложения - этого достаточно, при неправильной можно полагать, что вмешался злоумышленник, важно не скомпрометировать защищенные данные
в чем вопрос то, какой смысл проверять токен на старте?

[Дмитрий]

Даша Циклаури: могут подменить и после старта, это понятно. Пока я вижу только такой вариант: хранить токен спокойно в сторедже и полагаться на него только для отображения или скрытия каких-то роутов. А серьезная валидация будет только на бэке.

[Даша Циклаури]

Дмитрий: именно для такого случая выше мной приведен код

[Дмитрий]

Даша Циклаури: Даша, спасибо, у меня по такой же логике и написан текущий код. Думал, что есть более верный путь

[Дмитрий]

Даша Циклаури: Даша, а какой профит в этой строчке? return config || $q.when(config);

[Даша Циклаури]

Дмитрий: возврат промиса в случае null/undefined/false вероятно для обработки в блоке catch
более подробно расписано тут: stackoverflow.com/questions/19770889/angularjs-int...

[Александр Кондауров]

Я от интерсепторов вообще избавился, в самом первом родительском стейте делаю запрос на адрес типа /auth/me, который валидирует токен и возвращает данные юзера, приложение не будет показано если сервак вернет 401 а средиректит на стейт логина. А для того чтобы токен указать для каждого запроса просто использую $httpProvider.defaults.headers.common

А роль responseError играет такой код:
$rootScope.$on("$stateChangeError", (e: ng.IAngularEvent, toState: IState, p1: any, fromState: IState, p2: any, err: any) => {

console.log("state change error");

if (err.status == 401) {
console.info("go to login");
$state.go(StateNames.login, {from: toState.name});
} else {
console.info("go to badGateway", err);
$state.go(StateNames.badGateway, {from: toState.name})
}

e.preventDefault();

});

[Дмитрий]

Александр Кондауров: Можете скинуть кусок где у вас проходит отправка данных на сервер для аутентификации?

[Александр Кондауров]

this.authService.login(this.cred).then((res) => {
if (res) {
this.toastr.success("Вы вошли в систему", "Авторизация");
if (this.from) {
this.$state.go(this.from)
} else {
this.$state.go("index")
}
} else {
this.toastr.error("Не могу войти в систему", "Авторизация");
}
})

[Дмитрий]

А как у вас асинхронный запрос превращается в синхронный? Система ведь отправила запрос через authService.login и продолжила грузит стейт.