Как создать глобальный таймер на уровне приложения в Angular?

Question

Я хотел бы иметь таймер, который автоматически запускает logout() в моем authentication.service в определенное время независимо от того, на какой странице я нахожусь в моем приложении.

Я попытался создать таймер на моем AuthenticationService, но проблема в том, что если я перенаправлю на другую страницу ... этот таймер будет потерян.

authentication.service:

@Injectable()
export class AuthenticationService {
  ticks =0;
    timer :Observable<number>;
  constructor(private http: Http, private _JwtHelper: JwtHelper, private router: Router) {
  }

  isLoggedIn() {
    console.log('authentication service islogged in called ')
    let token = localStorage.getItem('token');
    if (!token) { return false; }
    else {
      return true;
    }
  }

  login(credentials) {
    return this.http.post('http://somthing/api/login/login',
      credentials)
      .map(response => {
        let result = response.json();
        if (result && result.token) {
          localStorage.setItem('token', result.token);

           this.timer = Observable.timer(7000,1000);
    this.timer.subscribe(t=> {
        this.func(this);
    });


          return true;
        }
        return false;
      });
  }
func(t){
   this.logout();
   t.unsubscribe();
}
  logout(): void {

    localStorage.removeItem('token');
    this.router.navigate(['/login']);

  }

}

Я думал о создании таймера на app.component, но затем я хочу подписаться на таймер только при вызове функции входа службы аутентификации из формы входа.

Answer 1

Я решил это, создав:

CanActivateViaAuthGuard.service

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {

  constructor(private authService: AuthenticationService, private router: Router) {}

  canActivate() {         

        if(this.authService.isLoggedIn()==false ){
            this.router.navigate(['/login']);
            return false;
        }
        else{
            return true;
        }
  }
}

authentication.service

 isLoggedIn() {

let token = localStorage.getItem('token');
if (!token) { return false; }
else {
  this.setTimeOutTimer();
  return true;
}
  }



setTimeOutTimer() {
    console.log('**setTimeOutTimer**')
    if(this.sub){
      this.sub.unsubscribe();
    }
 let expiry=this.currentUser.exp;

    this.timer = Observable.timer(1000, 1000);

    this.sub = this.timer.subscribe(t => {
      let timenow= moment().format('X'); 
      console.log(expiry + ' '+timenow );
      if(expiry<timenow){

        this.sub.unsubscribe();
      this.logout();

      }
    });
  }


get currentUser() {
    let token = localStorage.getItem('token');
    if (!token) return null;
    return this._JwtHelper.decodeToken(token);
  }

маршруты:

const routes: Routes = [
  {path: '', canActivate:[CanActivateViaAuthGuard], children:[
    {path:'home', component: HomeComponent},//,canActivate:[CanActivateViaAuthGuard]
    {path:'dummy', component: DummyComponent},...
    ...
    ...

Answer 2

Вы можете сохранить рассчитанное время выхода из системы в localStorage во время входа в систему, затем в конструкторе вы можете запустить таймер из времени localStorage или значения по умолчанию.

@Injectable()
export class AuthenticationService {
  ticks =0;
  timer :Observable<number>;

  constructor(private http: Http, private _JwtHelper: JwtHelper, private router: Router) {
    const logoutTime = localStorage.getItem('logoutTime') || Date.now() + 7000;
    this.startTimer(logoutTime);
  }

  isLoggedIn() {
    console.log('authentication service islogged in called ')
    let token = localStorage.getItem('token');
    if (!token) { return false; }
    else {
      return true;
    }
  }

  login(credentials) {
    return this.http.post('http://somthing/api/login/login',
      credentials)
      .map(response => {
        let result = response.json();
        if (result && result.token) {
          localStorage.setItem('token', result.token);
          localStorage.setItem('logoutTime', Date.now() + 7000);
          this.startTimer(Date.now() + 7000);
          return true;
        }
        return false;
      });
  }

  startTimer(time) {
    this.timer = Observable.timer(time);
    this.timer.subscribe(t=> {
      this.func(this);
    });
  }

  func(t){
      this.logout();
      t.unsubscribe();
  }

  logout(): void {

    localStorage.removeItem('token');
    localStorage.removeItem('logoutTime');
    this.router.navigate(['/login']);

  }

}