Angular 在CanDeactivate中可观察到的处理

我有一个拦截器，它在令牌过期时捕获服务器错误。然后拦截器向api请求刷新的令牌。成功后，拦截器再次发送http请求。出现错误时，拦截器将删除本地存储，并应重定向到登录页面

// canDeactivateGuard
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root',
})
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

现在我有了一个带有canDeactivate守卫的页面。所以我想在canDeactivate Guard中检查令牌是否有效。如果无效，我想向API请求一个刷新的令牌。一旦成功，我不想离开这一页。出现错误时，我想注销用户并重定向到登录页面

// canDeactivateGuard
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root',
})
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

//canDeactivateGuard
导出接口CanComponentDeactivate{
canDeactivate:（）=>可观察的|承诺|布尔值；
}
@注射的({
providedIn:'根'，
})
导出类CanDeactivateGuard实现CanDeactivate{
canDeactivate（组件：CanComponentDeactivate）{
返回component.canDeactivate？component.canDeactivate（）：true；
}
}

//组件
canDeactivate（）：可观察的|布尔值{
如果（！this.authService.isTokenValid（））{
//在这里，我想向api请求一个新的令牌
//api出错时，我想将用户重定向到登录页面
//而且不想显示模态
返回此.authService.refreshToken（）管道(
地图（res=>{
console.log（'test'）；
返回false；
}),
catchError（err=>{
log（“测试错误”）；
返回（真）；
})
);
}
if（Object.is（this.testForm.get（'text'）.value，this.oldText））{
this.modalService.hide（1）；
返回true；
}否则{
this.modalRef=this.modalService.show（this.modalTemplate）；
返回false；
}
}

//AuthService
公共刷新令牌（）：可观察{
返回此.http.post（`${environment.apirl}/auth/refresh`，{}）.pipe(
map（{data}）：any=>{
const apiToken=this.tokenAdapter.adapt（数据）；
this.setJwtToken（apiToken）；
this.currentTokenSubject.next（apiToken）；
返回令牌；
})
);
}

---

我不知道如何更改从api捕获错误的代码，以及如何重定向用户。canDeactivate方法的map（）和catchError（）中的console.log都未调用。

刷新令牌应遵循以下格式，这将非常有用

    return this.http.get(`${environment.apiUrl}/auth/refresh`, {
    }).pipe(
      map(({ data }): any => {
        const apiToken = this.tokenAdapter.adapt(data);
        this.setJwtToken(apiToken);
        this.currentTokenSubject.next(apiToken);
        return apiToken;
      }),
      catchError(() => {
      return of(false);
    }));

然后在canDeactivate方法中

// component
canDeactivate(): Observable<boolean> | boolean {
  if(!this.authService.isTokenValid()) {
  // here i want to ask the api for a new token
  // on error of api I want to redirect the user to login page
  // and don't want to show a modal
  return this.authService.refreshToken().pipe(
    map(res => {
      if (!res) {
        console.log('test error');
        return true;
      }

      console.log('test');
      return false;
    })
  );
}
if (Object.is(this.testForm.get('text').value, this.oldText)) {
  this.modalService.hide(1);
  return true;
} else {
  this.modalRef = this.modalService.show(this.modalTemplate);
  return false;
}
    }

//组件
canDeactivate（）：可观察的|布尔值{
如果（！this.authService.isTokenValid（））{
//在这里，我想向api请求一个新的令牌
//api出错时，我想将用户重定向到登录页面
//而且不想显示模态
返回此.authService.refreshToken（）管道(
地图（res=>{
如果（！res）{
log（“测试错误”）；
返回true；
}
console.log（'test'）；
返回false；
})
);
}
if（Object.is（this.testForm.get（'text'）.value，this.oldText））{
this.modalService.hide（1）；
返回true；
}否则{
this.modalRef=this.modalService.show（this.modalTemplate）；
返回false；
}
}

刷新令牌应遵循以下格式，这将非常有用

    return this.http.get(`${environment.apiUrl}/auth/refresh`, {
    }).pipe(
      map(({ data }): any => {
        const apiToken = this.tokenAdapter.adapt(data);
        this.setJwtToken(apiToken);
        this.currentTokenSubject.next(apiToken);
        return apiToken;
      }),
      catchError(() => {
      return of(false);
    }));

然后在canDeactivate方法中

// component
canDeactivate(): Observable<boolean> | boolean {
  if(!this.authService.isTokenValid()) {
  // here i want to ask the api for a new token
  // on error of api I want to redirect the user to login page
  // and don't want to show a modal
  return this.authService.refreshToken().pipe(
    map(res => {
      if (!res) {
        console.log('test error');
        return true;
      }

      console.log('test');
      return false;
    })
  );
}
if (Object.is(this.testForm.get('text').value, this.oldText)) {
  this.modalService.hide(1);
  return true;
} else {
  this.modalRef = this.modalService.show(this.modalTemplate);
  return false;
}
    }

//组件
canDeactivate（）：可观察的|布尔值{
如果（！this.authService.isTokenValid（））{
//在这里，我想向api请求一个新的令牌
//api出错时，我想将用户重定向到登录页面
//而且不想显示模态
返回此.authService.refreshToken（）管道(
地图（res=>{
如果（！res）{
log（“测试错误”）；
返回true；
}
console.log（'test'）；
返回false；
})
);
}
if（Object.is（this.testForm.get（'text'）.value，this.oldText））{
this.modalService.hide（1）；
返回true；
}否则{
this.modalRef=this.modalService.show（this.modalTemplate）；
返回false；
}
}

Try

从
canDeactivate
方法返回此.authService.refreshtToken（）。您不返回可观察对象，因此没有人订阅它，这就是为什么不调用
map
和
catchError
是的，对不起，我忘了。我已经试着让它返回可观察到的，但它不起作用。不同的是，模态没有打开，当我没有返回可观察的时，模态被打开。我已经在我的帖子中添加了返回。那么为什么不将模态逻辑移到observable中呢？observable中的控制台日志没有被调用，因此模态也不会打开。请尝试
返回这个.authService.refreshToken（）
from
canDeactivate
方法。您不返回可观察对象，因此没有人订阅它，这就是为什么不调用
map
和
catchError
是的，对不起，我忘了。我已经试着让它返回可观察到的，但它不起作用。不同的是，模态没有打开，当我没有返回可观察的时，模态被打开。我已经在我的帖子中添加了返回。那么为什么不将模态逻辑移到observable中呢？observable中的控制台日志没有被调用，因此模态也不会打开。我已经尝试过这样做，但控制台日志没有在canDeactivate方法中被调用。我已经尝试在refreshToken的catchError中放置控制台日志，但是它也没有被调用。它是否使用http 500转到map？这很奇怪，你是说如果它在这个代码段中调用这个控制台日志map（res=>{if（！res）{console.log（'testerror'）；返回true；}“``不，这个控制台日志没有被调用。refreshToken中的映射，我的意思是askI已经尝试过了，但是控制台日志没有在canDeactivate方法中被调用。我已经尝试过在refreshToken的catchError中放置一个控制台日志，但是它也没有被调用。它是否转到映射，使用http 500？这非常奇怪，你的意思是如果它在c中调用这个控制台日志ode代码段？```映射（res=>{if（！res）{console.log（'test error'）；返回true；}``不，这个控制台日志没有被调用。我的意思是询问refreshToken中的映射