Вы должны обернуть <router-view>
тегом <transition>
:
<transition name="fade-slide-up" mode="out-in">
<router-view></router-view>
</transition>
И затем создать переход, который вы хотите в <style>
. Вот пример:
.fade-slide-up-enter-active {
transition: all 0.5s ease;
}
.fade-slide-up-leave-active {
transition: all 0.5s ease;
}
.fade-slide-up-enter, .fade-slide-up-leave-to {
transform: translateY(40px);
opacity: 0;
}
Вы можете добиться этого, используя RxJS / таймер
Будьте в курсе запросов, которые отправляются сразу после обновления запроса токена со старым действительным токеном. Я рекомендую использовать перехватчик и ставить в очередь все запросы, отправленные после refreshToken. Подождите, пока придет refreshToken, а затем отправьте запросы в очередь.
Другой способ - перехватить ошибку 401 -> запрос на копирование -> refreshToken -> отправить копию запроса.
Лучше всего использовать операторы interval
и switchMap
.
Сначала верните наблюдаемое из функции refreshToken. Используйте оператор map для выполнения всех других вещей, таких как преобразование данных, сохранение в localalstorage и т. Д. В методе refreshToken()
.
import { interval, pipe } from 'rxjs';
import { map, switchMap } from 'rxjs/operators';
.....
refreshToken(token: string) {
const tokenJson: any = {'token': token};
return this.http.post('/api-token-refresh/', tokenJson, httpOptions);
};
checkingTokenOnInterval(){
const intervalTime = 4*60*1000;
const token = 'sdfsdf';
interval(intervalTime).pipe(switchMap(() => this.refreshToken(token))).subscribe(()=>{
//do something
});
}
Используйте checkingTokenOnInterval()
для вызова вызова refreshToken каждые 4 минуты.